Skip to content

Slider

A Slider component allows users to select one or multiple values from a defined range by dragging one or more handles along a track.

Ready to use

Design Develop Accessibility

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”
  1. Track
  2. Progress
  3. Thumb

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 thumb’s fill while the user drags or presses; Disabled mutes the thumb and progress fill but keeps the track 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 thumb size and border treatment stay identical regardless of handle count.

Variant

Three variants on the track 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.