Tier 1Web (www / app / auth). The full design system: our component library and the components.css recipe. This is the one tier where the recipe is the contract, native tiers take the tokens and nothing else.--slider-track-height · --radius-pill · --slider-knob-size · --radius-lg
01Slider: one primitive, three jobsseek · volume · numeric
Shipped: app.put.io has one slider, the seek bar in the audio player and the Chromecast player (react-slider): 3px --solid track, --yellow-solid fill and 18px knob, the time in a bubble on hover. Video players draw their own scrubbers.
41:12
proposed The token recipe below: --slider-track-height track, --slider-knob-size knob, --slider-fill. The seek variant adds a buffered band in --slider-buffer behind the fill, that band is the only thing separating a player scrubber from any other slider.

Keyboard: ←/→ one step, ⇧←/⇧→ ten, Home/End to the ends; the knob takes --shadow-focus, never an outline.
Seek · buffered
41:12
Volume proposed
65
Focused
50
Disabled
20
02Stepped: download speed limitlabelled stopsproposed
When the values are meaningful settings rather than a continuum, label the stops and snap to them. The current value repeats as text, a knob position is not a readout.
off1 MB/s5 MB/s20 MB/s∞
Track
--slider-track-height · --slider-track
Fill
--slider-fill
Knob
--slider-knob-size · --shadow-focus
Hit area
--slider-hit-height · 44px touch