A slider lets someone set a value from a given range. Sliders can take immediate effect, like a volume control, or can require a submission, like in a form.
Use a slider for imprecise values. Don't use them for ranges that are very small or very large. For precise numerical inputs, like a dollar amount, try an input.
Default sliders let someone choose any approximate value along an unmarked range, like brightness controls.
Step sliders divide a track into discrete values, like screen resolutions settings, and will snap the thumb to the specific value closest to the where the track was selected.
Sliders can be manipulated by moving the thumb along the track, or by selecting a spot along the track that the thumb will jump to. All interactions are optimized for mouse, keyboard, and touch.
Sliders can be laid out vertically or horizontally.
Use sliders with a label, even if that label is hidden. It’s common to use a tooltip to label the current value of a slider. This information in the tooltip must be perceivable to people using screen readers.
Slider labels should briefly describe what the range represents. Define the values at the min and max of the range. For non-numerical ranges, use parallel terminology, like min/max and high/low.