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.

Usage

• Use the slider control when selecting the precise value does not matter. If the exact value matters, use the Picker control.
• Determine the default minimum and maximum values of the slider based on context and use within the app.

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

Structure

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

B. Value
The value indicates the current selected value.

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.

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.

Regular Width

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

Resources

Create
Filter