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.

Common Characteristics

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.

MIN Condition Grade
MAX Condition Grade
These two sliders are functionally identical, even though the label and selected range are expressed differently.

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.


Single Thumb

A slider with a single thumb can be used to exclude high values or low values.

MIN Condition Grade
This slider excludes low values by sliding to the right.
MAX Odometer
This slider excludes high values by sliding to the left.

Two Thumbs

1,000 - 4,000
This slider excludes low and high values.