Sliders let the user set a value in a given range by tapping—or scrubbing back and forth—on a track. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. (Ex. adjusting brightness).
Use a slider when you want users to be able to set defined, contiguous values (such as volume) or a range of discrete values (such as screen resolution settings). A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium—not about setting the value to 2 or 5.
Use a slider if the user would benefit from instant feedback on the effect of setting changes. For example, users can choose a color more easily by immediately seeing the effect of changes to hue, saturation, or luminosity values. Only a step range of 1 is supported.
Slider is displayed horizontally and can be moved to the right or left.
<input type="range" value="50" max="100" step="1">
Slider is displayed vertically and can be moved to the top or bottom.