Slider Preview
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.
Resources
Types
Default
Default sliders let someone choose any approximate value along an unmarked range, like brightness controls.
Step
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.
Behavior
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.
Thumb selection
Track selection
Layout
Sliders can be laid out vertically or horizontally.
Vertical alignment
Horizontal alignment
Accessibility
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.
Content
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.
