Back to Museum

Slider Phone Input

Why let users simply type their phone number when they can painstakingly scrub through 40 million possible combinations to find the right one? Accuracy is key.

Live Preview

Enter your phone number

Please slide carefully to select your exact number.

61234567

60000000 99999999

Source Code

slider_phone.html

<h1>Enter your phone number</h1>

<label for="phone_input">Phone number</label>
<br>
<input name="phone_input" id="input" type="range" min="60000000" max="99999999" step="1" value="61234567">
<span id="text">61234567</span>

<script>
  const rangeInput = document.getElementById("input")
  const choice = document.getElementById("text");

  rangeInput.addEventListener("input", (event) => {
    choice.innerText = event.target.value
  })
</script>