Back to components
Slider
The Slider Component allows users to enter a value within constrained range.
Table of Contents
Edit this section, Opens in new windowUsage
Principles
Sliders can have 2 states:
-
initialized (where a slider value is already set, and it shows progress);
-
uninitialized (slider is at its default state, with thumb resting at the middle, no progress is shown);
Initialized
Uninitialized
Anatomy
- Label element
- Slider without initial value set
- Min value label
- Max value label
Specs
Slider data label has 1rem (16px) bottom margin.
Height of slider is 2rem (32px).
Descriptive slider value labels have aline height of 1.75rem (28px) and are positioned right under the slider element.