Components

Slider

Slider allows changing a value with a draggable control.

Usage

A slider lets the user select a single value from a continuous scale. Sliders are appropriate for making a selection from predetermined list in a range, or a value that does not need to be exact. In scenarios where the available range is very large or very small using a slider should be avoided. For scenarios where the user is requested to provide a exact an exact numerical value, consider using an input field.

Appropriate interaction pattern

Use a slider for appropriate interactions.

Avoid sliders for interactions where there are more appropriate interaction patterns available.

Interaction states

Default

The default state before the user interacts with the slider.

Focus

The slider is in focus.

Disabled

The slider is unavailable for interaction. For accessibility considerations, avoid using the disabled state in your designs if possible.

Pressed

The slider is currently being interacted with.

Hover

Currently hovering with a pointer device in desktop mode.

Formatting

Anatomy

A. Rail
B. Track
C. Thumb
D. Tooltip

Elements

Label

A label can be provided to inform the user of the slider's function.

Min/max values

Min/max values can be added to the edges of the track to indicate the boundary values.