# rn-slider
URL: /docs/native/components/slider

Draggable slider with custom range, step, tooltip, and track marks.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-slider
```

**Dependencies:**
- [react-native-gesture-handler](https://www.npmjs.com/package/react-native-gesture-handler)
- [react-native-reanimated](https://www.npmjs.com/package/react-native-reanimated)
- [react-native-worklets](https://www.npmjs.com/package/react-native-worklets)

## Usage

```tsx
import { Slider } from '@/components/docyrus-native/slider';

<Slider value={50} onValueChange={(v) => setValue(v)} />

```

## 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 |