Slider
Value slider with label, hint, ticks, readout.
Loading…
Value slider with label, hint, ticks, readout.
Loading…
Primary control for numeric parameters — opacity, blur, exposure, dimensions. Supports label, hint chip, ticks, and inline numeric readout.
<Slider label="Opacity" value={80} onValueChange={setOpacity} min={0} max={100} />| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Current value (controlled). |
| onValueChange | (value: number) => void | — | Called when value changes. |
| min | number | 0 | Minimum value. |
| max | number | 100 | Maximum value. |
| step | number | 1 | Step increment. |
| label | string | — | Label shown inside the track. |
| hint | string | — | Hint chip next to label (e.g. Drag). |
| showValue | boolean | true | Show numeric input. |
| tickCount | number | 9 | Number of tick marks. |
| snapToTicks | boolean | true when tickCount > 0 | Soft magnetic snap to tick positions while dragging. |
| disabled | boolean | false | Disable interaction. |
| className | string | — | Optional CSS class. |
Also copy lib/utils.ts (cn helper):