Components
Slider
A native range input under a drawn track.
Slippage tolerance0.5%
Seats40 seats
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/slider.jsonThe behaviour is not reimplemented
Underneath the drawn track and knob is a real <input type="range">, made
transparent and laid over the top. Keyboard support, touch dragging, screen
reader announcements and the whole value model come free and correct.
Rebuilding that on a div with pointer events is how sliders end up keyboard-inaccessible, and it is a surprising amount of code to get wrong.
Always show the value
A slider whose current value you cannot read is a control you cannot set
deliberately — you can only nudge it and hope. format exists so the readout
can carry its unit.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / onChange | number / (v) => void | — | Controlled. |
| min / max / step | number | 0 / 100 / 1 | Passed to the input. |
| format | (v: number) => string | — | For the readout — percentages, seats, currency. |