Slider
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#4d4d4dcolor-fill-neutral-emphasis#000000Progress
Background color:
color-fill-neutral-emphasis#4d4d4dcolor-fill-neutral-emphasis#000000Thumb
Background color:
color-fill-neutral-emphasis#4d4d4dcolor-fill-neutral-emphasis#000000 Dot color:
color-fill-contrast-emphasis#f5f5f5color-fill-contrast-emphasis#ffffff Border color:
color-border-contrast-default#e4e4e4color-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#f5f5f5color-fill-contrast-emphasis#ffffffState : Disabled
Section titled “State : Disabled”Thumb
Background color:
color-fill-contrast-default#d4d2d1color-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#d4d2d1color-fill-contrast-default#e4e4e4Progress
Background color:
color-fill-neutral-emphasis#4d4d4dcolor-fill-neutral-emphasis#000000Variant : EV
Section titled “Variant : EV”Track
Background color:
color-border-ev-default#d49677color-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 |
Accessibility
Section titled “Accessibility”For Design
Section titled “For Design”- All states (rested, disabled) must maintain accessible contrast.
- Focus styles must remain visible and meet WCAG AA contrast requirements across all supported surfaces.
- Colour tokens used should be semantic (e.g.
foreground/neutral/default) rather than fixed values to ensure the component adapts correctly to different themes or surfaces.
For Dev
Section titled “For Dev”To ensure the slider meets WCAG 2.1 AA and supports assistive technologies, follow these implementation standards:
- Key Points
- The slider must be operable without a mouse or touch.
- Users must always be able to perceive the current value.
- Changes in value should be clearly communicated to assistive technologies.
- Interaction should be predictable and consistent.
- Visual, motor, and cognitive accessibility needs should all be considered.
- Keyboard Navigation
- The slider must be fully operable using the keyboard.
- Each handle (thumb) must be individually focusable.
- Recommended keyboard behavior:
- Arrow keys: increase or decrease the value by one step.
- Shift + Arrow keys (optional): increase or decrease by a larger step.
- Home: move the handle to the minimum value.
- End: move the handle to the maximum value.
- For range or multi-handle sliders, keyboard interaction must clearly indicate which handle is currently active.
- Focus Ring / Visible Focus
- Sliders must have a visible focus indicator when focused via keyboard.
- Focus should move logically and predictably, especially when multiple handles are present.
- When a value changes via keyboard interaction, focus must remain on the active handle.
- Avoid moving focus automatically unless explicitly triggered by the user.
- Screen Reader Support
- Each slider handle must expose the correct ARIA role and attributes, including:
role="slider"aria-valueminaria-valuemaxaria-valuenowaria-valuetext(when a formatted or non-numeric value is shown)
- The slider must have a programmatically associated label that clearly describes its purpose.
- Screen readers should announce the slider label, the current value, and the minimum and maximum values.
- Value changes triggered by keyboard input should be announced in real time.
- For range sliders, ensure that each handle is announced distinctly (e.g. “Minimum value” and “Maximum value”).
- Each slider handle must expose the correct ARIA role and attributes, including:
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.