Slider
Pointer-captured slider with step snapping, marks, a value bubble and complete keyboard support.
3 files · 212 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/slider.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs sliderUsage
import { Slider } from "@/components/opus/ui/slider";
<Slider value={v} onValueChange={setV} min={0} max={100} />API
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | number | — | Controlled / uncontrolled value. |
| min / max / step | number | 0 / 100 / 1 | Range and snapping. |
| onValueChange | (v: number) => void | — | Fires while dragging. |
| onValueCommit | (v: number) => void | — | Fires once on release. |
| tooltip | "drag" | "always" | "never" | "drag" | When to show the value bubble. |
| marks | { value; label? }[] | — | Ticks along the track. |
| formatValue | (v: number) => string | — | Formats bubble + aria-valuetext. |