How they help
For tasks requiring fine-tuned adjustments, sliders make interactions more engaging and efficient,
Example of slider
Anatomy
- Track: bar that shows the selected part of the rail
- Thumb: element that user can move left or right
- Tick mark: spots along the track that are preset
- Rail: bar that the thumb moves on to adjust a value or select a range
Visual reference for anatomy
Variants
There are 2 variants of the component: with and without tick marks.
