range is a new input type in HTML5 that allows the display of range sliders. There are many JavaScript libraries that allow the creation of such sliders, but now thereβs a native way to do it. Notice the use of the min, max, value, step attributes in the example:
<label for="age">
Your age?
<input type="range" name="age" id="age">
</label>
<label for="amount">
How many?
<input type="range" name="amount" id="amount"
min="100" max="1000" value="0">
</label>
<label for="value">
Value?
<input type="range" name="value" id="value"
min="0" max="100" value="20" step="10">
</label>
And here's the result of that markup: