# Slider

> Range input for values and zoom controls.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/slider.json`

## Install

```tsx
import { Slider } from "@aspyn-io/kit";
```

### Basic

```tsx
<Slider defaultValue={[50]} max={100} step={1} aria-label="Volume" />
```

### Controlled zoom control

Bounded zoom with a live readout.

```tsx
const [value, setValue] = React.useState([100]);

<Slider min={40} max={150} step={10} value={value} onValueChange={setValue} />
```

### Range (two thumbs)

```tsx
<Slider defaultValue={[25, 75]} max={100} step={5} aria-label="Price range" />
```

### Vertical

Set orientation="vertical" and give the slider a height to grow into.

```tsx
<Slider
  orientation="vertical"
  defaultValue={[60]}
  max={100}
  step={1}
  aria-label="Volume"
/>
```

### Disabled

```tsx
<Slider defaultValue={[40]} max={100} step={1} disabled aria-label="Volume" />
```

## Notes

- Keyboard accessible: arrows step, Page Up/Down jump, Home/End go to bounds (Radix).
- Pass an array for value/defaultValue: one entry per thumb.