HTML: Input Range Slider

By Xah Lee. Date: . Last updated: .

The input range is used for user input of a numerical value, within a min max range.

Here's a input range:

Here's the HTML code:

<input id="input_range_17846" type="range">

Here's the JavaScript code to display the value:

const slider = document .getElementById("input_range_17846");

const displayBox = document .getElementById("display_area_17846");

displayBox.innerHTML = slider.value;

slider.addEventListener("input", function () { displayBox.innerHTML = slider.value;} , false);

By default, the range is 0 to 100.

Specify Range, Step, Default Value

<input id="input_range_2_73496" type="range" max="1" step="0.1" value="0.7" >

Important Attributes

Slider with Markers

Here is a example of slider with markers, using the “list” attribute.

<input type="range" min="-50" max="50" value="0" step="1" list="marks">
<datalist id="marks">
  <option value="0">
  <option value="-30">
  <option value="30">
</datalist>

Labels

You can add labels to the markings.

this is not currently supported by major browsers.

<input id="input_range_4_33754" type="range" list="a-values">
<datalist id="a-values">
 <option value="10" label="Low">
 <option value="90" label="High">
</datalist>
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog