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.
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.
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.
Track
--slider-track-height · --slider-track
Knob
--slider-knob-size · --shadow-focus
Hit area
--slider-hit-height · 44px touch