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
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.
