Primitives
Slider · Stepper
Slider — thin 3px track, accent fill, 14px thumb that lifts 15% on hover. Stepper — 40px pill in A, square in C, mono value.
installnpx shadcn@latest add https://ds.bartoszrychlicki.com/r/br-primitives.json
Preview
Slider · 72%
Stepper
3
import { Slider, Stepper } from "@/components/br/primitives";
<Slider value={vol} onChange={setVol} min={0} max={100} step={1} label="Volume" />
<Stepper value={qty} onChange={setQty} min={0} max={99} step={1} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Current value (controlled). |
| onChange | (v: number) => void | — | Fires on every input change. |
| min / max / step | number | 0 / 100 / 1 | Range bounds. |
| label | string | "Value" | Accessible name for the range input. |