Design
The Slider component allows users to select one or multiple values from a defined range by dragging one or more handles (thumbs) along a track. It is commonly used for adjusting numeric values, setting limits, or selecting ranges in a visual and intuitive way.
Sliders can be configured to support:
- A single handle (e.g. volume, brightness, zoom)
- Multiple handles (e.g. selecting multiple thresholds)
- Range selection (minimum and maximum values)
They provide immediate visual feedback and are ideal when users benefit from seeing relative positions within a range rather than entering precise numbers manually.
When to use it (and when not to)
Section titled “When to use it (and when not to)”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 (e.g. price filters, time ranges).
Avoid sliders 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 — consider pairing the slider with an input field.
Quick summary of accessibility & consistency
Section titled “Quick summary of accessibility & consistency”- Ensure the slider is fully operable via keyboard (arrow keys, Home/End).
- Provide ARIA roles and attributes (e.g.
role="slider",aria-valuemin,aria-valuemax,aria-valuenow). - Make sure labels are programmatically associated with the slider.
- Maintain sufficient color contrast for the track, handles, and focus states.
- Provide visible focus indicators for keyboard users.
- Announce value changes appropriately for screen readers.
Properties
Section titled “Properties”Anatomy
Section titled “Anatomy”Slider
Direction: Horizontal
Gap:
spacing-2424pxspacing-2424pxTrack
Height:
spacing-044pxspacing-044px Width: 100%
Border radius:
radius-xl1000pxradius-xl1000pxProgress
Height:
spacing-044pxspacing-044px Border radius:
radius-xl1000pxradius-xl1000pxThumb
Size:
spacing-2424pxspacing-2424px Border radius:
radius-xl1000pxradius-xl1000px Border width: 1
State : Rested
Section titled “State : Rested”Track
Background color:
color-fill-neutral-emphasis#000000color-fill-neutral-emphasis#000000Progress
Background color:
color-fill-neutral-emphasis#000000color-fill-neutral-emphasis#000000Thumb
Background color:
color-fill-neutral-emphasis#000000color-fill-neutral-emphasis#000000 Dot color:
color-fill-contrast-emphasis#ffffffcolor-fill-contrast-emphasis#ffffff Border color:
color-border-contrast-default#d4d2d1color-border-contrast-default#e4e4e4State : Active
Section titled “State : Active”Thumb
Background color:
color-fill-neutral-subtle#e5e3e1color-fill-neutral-subtle#6c7073 Dot color:
color-fill-contrast-emphasis#ffffffcolor-fill-contrast-emphasis#ffffffState : Disabled
Section titled “State : Disabled”Thumb
Background color:
color-fill-contrast-default#f5f5f5color-fill-contrast-default#e4e4e4 Dot color:
color-fill-neutral-muted#f5f5f5color-fill-neutral-muted#a8aaacVariant : Range
Section titled “Variant : Range”Track
Background color:
color-fill-contrast-default#f5f5f5color-fill-contrast-default#e4e4e4Progress
Background color:
color-fill-neutral-emphasis#000000color-fill-neutral-emphasis#000000Variant : EV
Section titled “Variant : EV”Track
Background color:
color-border-ev-default#c57046color-border-ev-default#0072f0Styling
Section titled “Styling”Colors
Section titled “Colors”| Name | Applied as | Applied to |
|---|---|---|
color-fill-neutral-emphasis | Background color | Track, Progress, Thumb |
color-fill-neutral-emphasis | Background color | Track, Progress, Thumb |
color-fill-neutral-subtle | Background color | Thumb (active) |
color-fill-neutral-subtle | Background color | Thumb (active) |
color-fill-neutral-muted | Background color | Thumb (disabled dot) |
color-fill-neutral-muted | Background color | Thumb (disabled dot) |
color-fill-contrast-emphasis | Dot color | Thumb |
color-fill-contrast-emphasis | Dot color | Thumb |
color-fill-contrast-default | Background color | Track (range), Thumb (disabled) |
color-fill-contrast-default | Background color | Track (range), Thumb (disabled) |
color-border-contrast-default | Border color | Thumb |
color-border-contrast-default | Border color | Thumb |
color-border-ev-default | Background color | Track (EV variant) |
color-border-ev-default | Background color | Track (EV variant) |
Spacing
Section titled “Spacing”| Name | Applied as | Applied to |
|---|---|---|
spacing-04 | Height | Track, Progress |
spacing-04 | Height | Track, Progress |
spacing-24 | Size | Thumb, Gap |
spacing-24 | Size | Thumb, Gap |
radius-xl | Border radius | Track, Progress, Thumb |
radius-xl | Border radius | Track, Progress, Thumb |
Guidance on how to use a component.
- 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 (e.g. 5, 10, 15).
- Use range sliders when users need to define both minimum and maximum bounds.
Guidance on what to avoid when using a component.
- Don’t use sliders for precise data entry (use input fields instead).
- Don’t overload the slider with too many handles — it reduces clarity.
- Don’t hide value feedback; users should always know what they’re selecting.
- Don’t rely on color alone to communicate state or limits.
- Don’t make sliders too small to interact with comfortably.