Skip to content

role slider

Slider draft v0.1.0

Lets people pick a value in a range by moving a thumb along a track.

A slider sets a value whose position in a range matters more than its exact figure: a volume, a brightness, a price ceiling. A thumb slides along a track between a minimum and a maximum, by steps; the value can be shown next to the label. When the exact number matters, a Number field is better, alone or next to the slider.

Decisions

From decisions in packages/components/specs/components/slider.spec.json, newest first. Every active decision is implemented by the spec, the tokens, the web implementation and the guidelines.

Color

  • The track is the third neutral base fill (as the Progress bar's) and the thumb the accent brand fill, going to its hover and press steps, with a rim in the default surface color; disabled takes the shared disabled colors. The track has no filled portion before the thumb.

    The Figma library maps no color to sliders; the brand thumb keeps 3:1 against the track in both modes. A filled portion is not available in every browser without script.

    track-and-thumb-colors · 2026-10-03 · v0.1.0

    slider.control.background.*slider.thumb.background.*slider.thumb.border-color.*

    WCAG 1.4.11 Non-text Contrast (AA)

Size

  • Two sizes from the space scale: small (4 px track, 16 px thumb) and medium (8 px track, 20 px thumb, the default); the control is 24 px high at both, the thumb has a 1.2 px rim.

    sizes · 2026-10-03 · v0.1.0

    slider.control.height.*slider.thumb.size.*slider.control.min-heightslider.thumb.border-width

Behaviour