Slider
StableAn input where the user selects a value from within a given range.
Examples
Default
tsx
<Slider defaultValue={[50]} max={100} step={1} className="w-[60%]" />Neon Variant
tsx
<Slider variant="neon" defaultValue={[75]} max={100} step={1} className="w-[60%]" />API Reference
| Property | Description | Type | Default |
|---|---|---|---|
| variant | The visual style variant. | "default" | "neon" | "default" |
| defaultValue | The value of the slider when initially rendered. | number[] | - |
| value | The controlled value of the slider. | number[] | - |
| onValueChange | Event handler called when the value changes. | (value: number[]) => void | - |
| max | The maximum value for the range. | number | 100 |
| step | The stepping interval. | number | 1 |