Slider
Drag handle to select a value or range from a continuous interval. Built on the Radix UI Slider primitive.
<Slider defaultValue={[40]} max={100} step={1} aria-label="Volume" />Usage
import { Slider } from "@reva/ui";Slider exposes a size prop aligned with the Reva form-control ramp — sm, default, lg, xl — that scales the track thickness and thumb together. Pass an array to defaultValue / value; a two-handle range slider is just a two-element array.
Examples
Single value
<Slider defaultValue={[60]} max={100} step={1} aria-label="Volume" />Range
<Slider defaultValue={[20, 80]} max={100} step={1} aria-label="Price range" />Stepped
<Slider defaultValue={[40]} max={100} step={10} aria-label="Stepped" />Sizes
<VStack gap={6} className="w-full max-w-md"> <Slider size="sm" defaultValue={[40]} aria-label="sm" /> <Slider size="default" defaultValue={[40]} aria-label="default" /> <Slider size="lg" defaultValue={[40]} aria-label="lg" /> <Slider size="xl" defaultValue={[40]} aria-label="xl" /></VStack>With label
<VStack gap={2} className="w-full max-w-md"> <Label htmlFor="brightness">Brightness</Label> <Slider id="brightness" defaultValue={[60]} max={100} step={1} /></VStack>Disabled
<Slider disabled defaultValue={[40]} aria-label="Disabled" />Props
Slider forwards props to Radix Slider (SliderPrimitive.Root). See the Radix UI Slider documentation for value, defaultValue, onValueChange, min, max, step, orientation, and dir.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "default" | "lg" | "xl" | "default" | Control size — aligned with Input. |
value / defaultValue | number[] | — | Controlled vs uncontrolled value. Pass two entries for a range. |
onValueChange | (value: number[]) => void | — | Fires when the value changes. |
min | number | 0 | Minimum value. |
max | number | 100 | Maximum value. |
step | number | 1 | Step interval. |
orientation | "horizontal" | "vertical" | "horizontal" | Layout orientation. |
disabled | boolean | false | Disables the control. |