The slider allows a user to quickly select a single value within a range (such as a volume control), or a custom range (such as an odometer filter) with a click/drag gesture rather than slower, more motor-intensive typing.
Sliders are most useful for quick approximations. When greater precision is required, consider using a text input or combo box input.
Sliders may have an optional 2nd thumb.
All sliders include a track, one or two thumbs, a label, and a value or range of values.
All sliders indicate the selected range with dark color, and the excluded range with light color.
The low end of the range is always on the left.
Interaction and Accessibility
To ensure accessibility, the user can tap anywhere on the track to set the thumb, or drag the thumb along the track, or use the keyboard left/right arrows when the thumb is focused.
Slider thumbs can be enabled, hovered/focused, or disabled.
A slider with a single thumb can be used to exclude high values or low values.