HTML5 Range Input Type

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:

Browser Support

Can I Use input-range? Data on support for the script-async feature across the major browsers from caniuse.com.