Slider
A slider is a control that lets users select a value or range of values by moving a handle along a track.
Philosophy
Sliders provide a quick, visual way to adjust values, especially within large or continuous ranges.
Ideal for settings where relative adjustment matters (e.g., volume, brightness).
They make ranges intuitive and interactive.
They provide immediate feedback as the value changes.
Anatomy
Variants
Single-Value Slider
One knob, selects a single value.
Range Slider
Two thumbs, selects min and max values.
States
Idle
Track and thumb visible, thumb positioned at current value.
Usage tips
Dos
Use sliders for continuous ranges where precision isn’t critical.
Provide tick marks or numeric labels if exact values matter.
Give immediate feedback (e.g., update brightness as user slides).
Don’ts
Don’t use sliders for binary or small ranges (use toggle/stepper instead).
Don’t hide current value — always show context.
Don’t use too many sliders in one view; it overwhelms users.
Real-world example
