Components
iOSAndroid
Installation
pnpm dlx @docyrus/cli add @docyrus/rn-sliderRequired Packages(3 packages)
pnpm add react-native-gesture-handler react-native-reanimated react-native-workletsUsage
import { Slider } from '@/components/docyrus-native/slider';
<Slider value={50} onValueChange={(v) => setValue(v)} />
<Slider value={75} min={0} max={100} step={5} showTooltip />
<Slider value={30} marks markInterval={25} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current slider value |
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
step | number | 1 | Step increment |
disabled | boolean | false | Disabled state |
showTooltip | boolean | false | Show value tooltip while dragging |
marks | boolean | false | Show track marks |
markInterval | number | 25 | Interval between marks |
formatTooltip | (value: number) => string | — | Custom tooltip formatter |
onValueChange | (value: number) => void | — | Value change handler (while dragging) |
onSlidingComplete | (value: number) => void | — | Handler called when sliding ends |
trackHeight | number | 4 | Track height in pixels |
thumbSize | number | 20 | Thumb diameter in pixels |
tintColor | string | — | Custom fill color (overrides theme primary) |
className | string | — | Additional CSS classes |
Type Exports
| Type | Description |
|---|---|
SliderProps | Props for Slider component |