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…

   Tags:

   • accessibility
   

2. Styled Range Slider

   by Scott O'Hara

   

3. Value Bubbles for Range Inputs | CSS-Tricks

   posted on March 26, 2020 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 February 21, 2020 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">