# Slider

Picks a number, or a range of two, by dragging a thumb along a track: a volume, a price range, a zoom level. The track is the soft gray fill with an accent range up to the thumb; the arrow keys move it one step.

## Cách dùng

### Khi nào dùng

- Pick a number where the feel matters more than the exact value: volume, zoom, brightness.
- Pick a range between two values, such as a price filter.

### Khi nào không dùng

- An exact number, such as a quantity. Use Input.
- A few named choices. Use RadioGroup, or Select for a long list.
- Showing how much of a task is done. Use Progress.

## Biến thể

### orientation

horizontal fills the width of its parent. vertical fills the height of its parent, at least 160px.

Giá trị: `horizontal`, `vertical`. Mặc định: `horizontal`.

## Ví dụ

### Volume

```tsx
<div className="flex w-full max-w-xs flex-col gap-sm">
  <span id="volume-label" className="text-sm font-medium text-text-primary">Volume</span>
  <Slider aria-labelledby="volume-label" defaultValue={[60]} />
</div>
```

### Price range

Two values make two thumbs, each with its own name.

```tsx
<Slider
  aria-label="Price"
  thumbLabels={["Minimum price", "Maximum price"]}
  defaultValue={[20, 80]}
  step={5}
  className="max-w-xs"
/>
```

### Disabled

```tsx
<Slider aria-label="Brightness" defaultValue={[30]} disabled className="max-w-xs" />
```

## Nên và không nên

### Nên

- Use it when the exact number matters less than the feel: volume, zoom, a rough price range.
- Show the value next to it, and let users type an exact one in an Input when it matters.
- Save in onValueCommit, not in onValueChange, so a drag doesn't send a request per step.

### Không nên

- Don't use it for a precise number such as a quantity; use Input.
- Don't use it for a few named choices; use RadioGroup or Select.
- Don't use it to show progress; use Progress.

## Props

| Tên | Kiểu | Giá trị | Mặc định | Mô tả |
| --- | --- | --- | --- | --- |
| `defaultValue` | `number` |  |  | One number per thumb, as an array: [40], or [20, 80] for a range. The value on first render, when you don't control it. |
| `value` | `number` |  |  | The values as an array, when you control them. Pair it with onValueChange. |
| `onValueChange` | `function` |  |  | Called with the new values on every step, while dragging too. Update what the slider previews here. |
| `onValueCommit` | `function` |  |  | Called once when the user lets go or presses a key. Save or fetch here. |
| `min` | `number` |  | `0` | The lowest value. |
| `max` | `number` |  | `100` | The highest value. |
| `step` | `number` |  | `1` | How far one arrow key press moves the thumb. |
| `orientation` | `enum` | `horizontal`, `vertical` | `horizontal` | horizontal fills the width of its parent. vertical fills the height of its parent, at least 160px. |
| `disabled` | `boolean` |  | `false` | Can't be focused or moved; the range and the thumbs turn to the disabled color. |
| `name` | `string` |  |  | Form name. Inside a form, each value is submitted under it. |
| `thumbLabels` | `string` |  |  | Optional string[] with one accessible name per thumb, in order, for a range (Minimum price, Maximum price). Each name replaces aria-label on its thumb. (The spec schema has no array type, so it is declared as string.) |

## Cấu tạo

| Phần | Mô tả |
| --- | --- |
| `root` | Slider: a row as wide as its parent (a column when vertical), 20px tall, that holds the track and the thumbs. |
| `track` | The track: 4px, radius-full, the soft gray fill. |
| `range` | The range: the accent fill from min to the thumb, or between the two thumbs of a range. |
| `thumb` | A thumb: a 16px circle on the raised fill with the control border. Hover and pressed layer the neutral overlays; focus shows the ring. |
| `hitArea` | Transparent ::before centered on each thumb, never smaller than size-target-min. |

## Khả năng truy cập

Role: `slider`

| Phím | Hành động |
| --- | --- |
| `ArrowRight, ArrowUp` | Raises the value by one step. |
| `ArrowLeft, ArrowDown` | Lowers the value by one step. |
| `PageUp, PageDown` | Raises or lowers the value by ten steps. |
| `Home, End` | Sets the value to min or max. |
| `Tab` | Moves to the next thumb; each thumb is its own tab stop. |

- Each thumb is a slider with aria-valuenow, aria-valuemin and aria-valuemax. The type requires aria-label or aria-labelledby on Slider, which every thumb takes; give each thumb of a range its own name with thumbLabels (Minimum price, Maximum price).
- Show the value in text next to the slider when it matters; the thumb's position alone is hard to read exactly.
- The thumb is 16px, but its hit area is size-target-min (24px on mouse, 44px on touch).
- Disabled slides nowhere and turns the range and the thumb to the disabled color.

## Cài đặt

```bash
npx shadcn add https://werewolf-ui.vercel.app/r/slider.json
```

Lệnh này thêm luôn `styles/werewolf.css`, bộ token mà mọi component dùng, và các component khác mà nó cần. Import file đó một lần trong CSS gốc, ngay sau `@import "tailwindcss"`, với đường dẫn tính từ file CSS đó (từ `app/globals.css` là `@import "../styles/werewolf.css"`).