Component
Slider
A frosted capsule track with a filled lead and a circular thumb, driven by a native range input underneath for accessibility and gesture support.
The primitive
slider.tsx
<NativeSlider value={value} onValueChange={setValue} />Example
Sets a network-fee priority level as a percentage, the kind of choice where a stepper would feel too coarse.
Priority fee25%
slider-example.tsx
<NativeSlider value={feeValue} onValueChange={setFeeValue} />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 | — |