# Slider

Pick a value or a range by dragging. Line for forms, Bold for a headline value, Field for dense inspectors, all with one or two thumbs.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/slider
```

## Usage

```tsx
import { Slider } from '@/components/fetaui/slider'

export function Example() {
  return <Slider label="Volume" defaultValue={40} onValueChange={setVolume} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| label | string | required |
| value | number or [number, number] |  |
| defaultValue | number or [number, number] | min |
| onValueChange | (value) => void |  |
| min, max, step | number | 0, 100, 1 |
| styleKind | line, bold, field | line |
| format | (value) => string | String |
| ticks | boolean | false |
| disabled | boolean | false |
| animated | boolean | true |
| orientation | horizontal, vertical | horizontal |
| length | px, for vertical | 160 |
| alwaysTip | boolean | false |

## When to use

- For a value in a known range, where the exact number matters less.

## When not to use

- When precise entry matters: use Input.

## Accessibility

- Each thumb has role slider with a value and a text value.
- Range thumbs are named minimum and maximum, and never cross, including typed values.
- A typed entry is a labelled input, and a typo keeps the old value.

## Motion

- Thumbs follow the pointer one to one, and spring at 500/34 when a click makes them jump.
- The value tip rises out of the thumb and hides 300 ms after release.
- With reduced motion, jumps are instant and the tip shows only with alwaysTip.