Component
Slider
A frosted capsule track with a filled lead and a circular thumb, draggable or keyboard-adjustable across its range.
Standalone
slider.tsx
<NativeSlider value={value} onValueChange={setValue} />Example
Sets a priority or intensity level as a percentage, the kind of choice where a stepper would feel too coarse.
Intensity25%
slider-example.tsx
<NativeSlider value={intensity} onValueChange={setIntensity} />Capabilities
| Prop | Type | Description |
|---|---|---|
| valuerequired | number | - |
| onValueChangerequired | (value: number) => void | - |
| min | number | - |
| max | number | - |
| step | number | - |
| disabled | boolean | - |
| leftIcon | React.ReactNode | Icons placed at left/right ends |
| rightIcon | React.ReactNode | - |
| className | string | - |