Slider
Slider
A Radix Slider.Root — one thumb, or several for a range (one per entry in value/defaultValue).
import { Slider } from "@pompeitech/vesuvius-ui";Single value
Range
Disabled
Steps
A larger step snaps the thumb to fewer positions — useful when only certain values are meaningful:
Vertical
API
Slider
| Prop | Type | Default | Description |
|---|---|---|---|
value / defaultValue | number[] | [0] | One entry per thumb — a two-entry array renders a range slider (see above). |
min / max | number | 0 / 100 | |
step | number | 1 | |
onValueChange | (value: number[]) => void | Fires continuously while dragging. | |
onValueCommit | (value: number[]) => void | Fires once, on release — use this instead of onValueChange for anything expensive (an API call), same distinction as input/change events. | |
orientation | "horizontal" | "vertical" | "horizontal" | Vertical needs an explicit height via className (h-44 above) — it has no intrinsic height of its own. |
disabled | boolean | false |
Accessibility
Each thumb is a real, focusable, ARIA slider role element. ←/→ (or ↑/↓ when vertical) adjust by one step, Home/End jump to min/max. aria-label is applied per-thumb automatically, suffixed with its index ("Price range 1", "Price range 2") when there's more than one — pass a single aria-label covering the whole slider's purpose, not one per thumb yourself.