Sliders should be used when allowing a user to select between a continuous range of values.

Having a continuous and granular range of values is critical for the slider to feel smooth and intuitive. Because of this, sliders are uncommon components, used only when all possible values conform to a consistent, continuous, and granular pattern.

Labels

All sliders should be clearly labeled. To provide more context to the feature, the slider can be used beneath a UIHeader.

Alternatives

If the possible values to select are not continuous and granular, then use a dropdown menu (UIMenu), or a list with radio buttons (UIRadio) instead.

‍

1. Selected Value Indication

The currently selected value is displayed immediately above the current position of the slider toggle. Units are included in this value, when relevant.

2. Slider Toggle

This is the draggable element on the slider. It corresponds to the selected value’s placement within the range of possible values.

3. Bar

The slider toggle is moved along a horizontal bar. This bar should be wide enough to easily make an accurate selection, leaving several pixels for each possible value.

‍

Sliders are directly interactive elements. Depending on the context they may be disabled to prevent interactivity.

Interactivity

Contrary to most other interactive components, sliders are manipulated by clicking+dragging the slider toggle. When in focus, the slider toggle can be manipulated with the keyboard by using the arrow keys.

‍