How can I create an HTML input range that allows the user to type in a number?

[Perpetual Newbie 1]

I want to create an HTML input range that allows the user to enter a value by typing it in, in addition to using the slider control.

I have read the documentation on MDN, but it seems that I can only create separate inputs for the range and the number.

How can I combine the two inputs so that their values are in sync? Ensuring that they stay in sync when the user interacts with either input.

[Everlasting Summer 4]

In HTML, you can use the input element with type="range" to create a slider control that allows users to select a value within a specified range. However, by default, the input element with type="range" does not allow users to manually type a value.

If you want to allow users to type a number as well as use the slider control, you can use a combination of input elements with type="range" and type="number". Here's an example:

<label for="range-input">Select a value:</label>
<input type="range" id="range-input" name="range-input" min="0" max="100" value="50">
<input type="number" id="number-input" name="number-input" min="0" max="100" value="50">

<script>
  const rangeInput = document.getElementById("range-input");
  const numberInput = document.getElementById("number-input");

  rangeInput.addEventListener("input", () => {
    numberInput.value = rangeInput.value;
  });

  numberInput.addEventListener("input", () => {
    rangeInput.value = numberInput.value;
  });
</script>

In this example, we have a label element that describes the purpose of the inputs, followed by an input element with type="range" that has a min value of 0, a max value of 100, and an initial value of 50. We also have an input element with type="number" that has the same min and max values as the range input, and the same initial value.

 

To connect the two inputs, we add some JavaScript code that listens for the input event on both inputs. When the range input changes, we update the value of the number input to match. And when the number input changes, we update the value of the range input to match. This ensures that the two inputs stay in sync with each other.

[Perpetual Newbie 1]

Thank you! It's working flawlessly, and I really appreciate your help!

In the below code, I have added the Tailwind CSS classes to make it look more beautiful.

<label for="range-input" class="text-lg font-medium text-gray-700">Select a value:</label>

<div class="flex items-center mt-2">
  <input type="range" id="range-input" name="range-input" min="0" max="100" value="50" class="flex-1 h-2 rounded-lg appearance-none bg-indigo-100 slider-thumb">
  <input type="number" id="number-input" name="number-input" min="0" max="100" value="50" class="w-20 ml-2 py-1 text-center rounded-md bg-indigo-100 text-indigo-800">
</div>
<script>
  const rangeInput = document.getElementById("range-input");
  const numberInput = document.getElementById("number-input");

  rangeInput.addEventListener("input", () => {
    numberInput.value = rangeInput.value;
  });

  numberInput.addEventListener("input", () => {
    rangeInput.value = numberInput.value;
  });
</script>