Sliders display a continuous range of values along a track. The minimum and maximum values are established and the user may use the thumb to select a single value between the minimum and maximum values. They are typically found in create and filter modals.

A slider control can be used when selecting a precise value does not matter. If the exact value matters, use the Picker control.

Structure

A. Label
The label describes the data range of the slider.

B. Value
The value indicates the current selected value.

Determine the default minimum and maximum values of the slider based on context and use within the app.

C. Slider
The slider control displays the range of values from which a selection can be made.

The thumb serves as a handle that moves along the track to set an approximate value. Values on the left of the thumb are selected and indicated with dark tint color and values on the right are unselected.

Avoid using long text for minimum and maximum values as they can shorten the track.

Behavior & Interaction

To adjust the value of a slider, the user slides the thumb control along the track between the minimum and maximum values. The value displays the selection as the user slides the thumb control.

Compact & Regular

In regular width, sliders are shown in a popover modal.

Resources

Create

Filter