Slider

Slider

Definition

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
2.5
MAX Condition Grade
2.5
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.

States

Slider thumbs can be enabled, hovered/focused, or disabled.

Variants

Single Thumb

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

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

Two Thumbs

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