Sliders

The InlineSlider component allows users to make selections from a range of values.



Use inline sliders to select a value from a range, such as setting screen brightness or font size. Changes made with sliders are immediate, allowing the user to continue to make adjustments until they are satisfied. Don’t use sliders in situations where adjustments are not immediate.

Anatomy

A. Progress bar
B. Progress track
C. Container
D. Decrease icon
E. Increase icon
F. Spacer

Design recommendations

Segmented slider

Consider using a segmented slider if the range of values is between three and nine. If the range is greater than eight, segments will be too small to be visible.

Usage

See the following examples of sliders.