"range"

This input type renders as a slider. It accepts the same attributes as the <input type="number"> : min, max, step and value.

Example of rendering on a desktop:

And on mobile devices:

Typical use

The basic use is to specify at least the value, min and max attributes, and eventually the step attribute, too:

But most of the time, you will need a visual feedback that shows the current value selected by the slider.

This online example on CodePen shows how to add a visual feedback using a very short JavaScript function and an <output> element. Just click and drag the small cursor of the slider (or use up and down arrow keys when the field has the focus):

Source code:

<!DOCTYPE html>

<head>

<title>Example of input type=tel</title>

<style>

#rangeValue1 {

border:1px solid black;

padding:2px;

}

</style>

window.onload = function() {

// Called when the page is loaded, for displaying initial value in the output

printValue('slider1','rangeValue1');

}

function printValue(sliderId, outputId) {

var x = document.getElementById(outputId);

var y = document.getElementById(sliderId);

x.value = y.value;

}

</script>

</head>

<body>

<form >

<label for="slider1">Select a value:</label>

<input id="slider1" type="range"

min="100" max="500" step="10" value="150"

oninput="printValue('slider1','rangeValue1')"/>

</form>

<br/>

Play with attributes: value, min, max, step...

</body>

</html>

Snapping behavior and the step attribute

When you click and drag the slider, it "jumps" to some snap points corresponding to the integer values of the range defined by the min and max attributes. The "size of the jumps" depends on the value of the step attribute.

Adding "ticks" to the range slider using a <datalist> element

Using the <datalist> element, it's possible to display "ticks" above the range slider, at given positions.

<label for="slider2">value=5 min=0, max=10 step=1, ticks at 2, 4, 6, 8 and 10:</label>

<input id="slider2" type="range"

list="ticks2"

min="0" max="10" step="1" value="5"/>

</datalist>

External resources

You can use CSS for "standard" styling (size, color, background color, etc.) . However, some custom attributes are available. Check this article from CSS tricks.
A script that automatically generates ticks, depending on the min, max and step attributes (Codepen from Dudley Storey): Auto-Generated HTML5 range input Ticks
From CSS{Portal}, a CSS generator help you style the html input range tag, very easy to use: Style Input Range
MDN's Web Docs: <input type=range>