Slider
A slider is a bar with selectable/grabbable handle. It allows users to click and drag horizontally to a desired value. It is used when users need to select a value from a predefined range of values. Sliders should always have a corresponding value or increment displayed within proximity of the component.
Demo and Developer GuidelinesAnatomy
Increment
Sliders can either be configured to show/hide range increments along with increment labels. Increments w/ labels can be used for things like selection of days of the week or percentages.
When using increment labels make sure numbers do not overlap between labels. Check with internationalization to ensure labels do not overlap each other when translated.
When using increment labels make sure numbers do not overlap between labels. Check with internationalization to ensure labels do not overlap each other when translated.
Correct
Incorrect
Types
Standard
The default range slider is used for granular numeric values like when choosing percentages from 0-100%
Incremented
The incremental range sliders are use when there is a predefined small selection of values based selectable items, like selections of numbers 1-10.
Labeled
The labeled range slider is used when there are predefined numeric values, like increments of 25 from 0-100.
Standard States
Incremented States
Behavior
The default range slider is used for granular numeric values.
An incremented labeled range slider with predefined numeric values.
Specifications
Styling
