Black Lives Matter! ✊🏾

type="range"

The input element represents a control for setting the element’s value to a string representing a number, but with the caveat that the exact value is not important, letting user agents provide a simpler interface than they do for the Number state. 4.10.5.1.13. Range state (type=range)

Links about type="range"

  1. Creating an Accessible Range Slider with CSS

    by Lindsey Kopacz

    I’ve always loved exploring how to make semantic, accessible elements aesthetically pleasing. And yes, it is possible. Challenging myself to…

  2. Styled Range Slider

    by Scott O'Hara

  3. Value Bubbles for Range Inputs | CSS-Tricks

    posted on by Chris Coyier

    HTML5 range inputs, in supported browsers and by design, don’t show the user the actual value they are submitting. If you want to use the cool slider, but show the value, you’ll have to do that yourself. Here we use the output element and jQuery to show the current value in a bubble that hovers abov…

  4. <input type=“range”>

    posted on by MDN

    input elements of type range let the user specify a numeric value which must be no less than a given value, and no more than another given value. The precise value, however, is not considered important. This is typically represented using a slider or dial control rather than a text entry box like th…

Code sample

<label for="steps">Steps</label>
<input id="steps" type="range" min="100" max="700" step="10">