HTML Input Range: Slider UI

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:

Current value:

Here's the HTML code:

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

Here's the JavaScript code to display the value:

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

var displayArea = document.getElementById("display_area_17846");

displayArea.innerHTML = slider.value;

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

By default, the range is 0 to 100.

Specify Range, Step, Default Value

Current 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.

Current value:

<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.

Current value:

<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>

See also: HTML Form Example

Reference

Like what you read? Buy JavaScript in Depth