Design
The Slider component allows users to select one or multiple values from a defined range by dragging one or more handles along a track. It’s commonly used for adjusting numeric values, setting limits, or selecting ranges in a visual and intuitive way, and provides immediate visual feedback when users benefit from seeing relative positions rather than entering precise numbers manually.
Anatomy
Section titled “Anatomy”- Indicator
- Progress
- Handle
- Value
When to use it
Section titled “When to use it”Use a slider when:
- Users need to adjust a value within a known, limited range.
- You want to provide a quick and interactive way to modify settings.
- Visual comparison across a range adds clarity (price filters, time ranges).
Avoid a slider when:
- Users must enter highly precise or arbitrary values.
- The range is very large or undefined.
- Accessibility or keyboard-only input is the primary interaction — pair the slider with an input field in that case.
Properties
Section titled “Properties”State
Rested, Active, and Disabled. Active swaps the handle’s fill while the user drags or presses; Disabled mutes the handle and progress fill but keeps the indicator visible so the user knows what’s there.
Handles
Single handle for one value (volume, brightness, zoom), or multiple handles for thresholds and ranges (price filter min/max). The handle size and border treatment stay identical regardless of handle count.
Variant
Three variants on the indicator itself: Default uses the neutral emphasis fill, Range uses a contrast fill for the inactive segments to highlight the selected range, and EV uses the EV brand colour for charging or efficiency tools.
Platform considerations
Section titled “Platform considerations”Desktop
Mouse and keyboard both work — arrow keys move the thumb in discrete steps, Home/End jump to the bounds. Pair with an input field when users need precise entry alongside the visual.
Tablet
Touch and pointer both work. Keep the thumb size large enough that fingers can grab it without overlapping adjacent handles.
Mobile
Touch-first. The 24 px thumb stays comfortable to grab; consider pairing with an input field when the value needs precise editing on a small screen.
Best practices
Section titled “Best practices”Sliders trade precision for feel — make the current value visible so users know what they’ve picked.
Do
Provide clear labels for the slider and its values (min, max, current), use sensible defaults that reflect common or recommended values, show the current value near the handle or in a linked input, snap to steps when values should be discrete (5, 10, 15), and use range sliders when users need to define both minimum and maximum bounds.
Don't
Don’t use sliders for precise data entry (use input fields instead), don’t overload the slider with too many handles, don’t hide value feedback (users should always know what they’re selecting), don’t rely on colour alone to communicate state or limits, and don’t make sliders too small to interact with comfortably.
Content guidelines
Section titled “Content guidelines”Label the slider with the dimension it adjusts (“Price range”, “Brightness”) and pair it with a clearly visible value read-out. Use the same units in the label and the read-out — “€20,000 – €40,000” reads better than mixing currency symbols and “k” abbreviations across the slider and its label. For range sliders, name both ends (“Min”, “Max”) near the handles so users can tell them apart without guessing.