# Slider

## Overview

A range input control that lets users select a numeric value by dragging a thumb along a track. Used for quantity selectors, volume controls, percentage settings, and any value within a continuous range.

---

## When to Use

- Adjusting numeric values within a range (width, volume, brightness, percentage)
- Budget or price range selectors
- Settings with numeric ranges (font size, zoom level)

## When NOT to Use

- Exact numeric entry — use `<Input type="number">` instead.
- Categorical selections — use `<RadioGroup>` or `<Select>`.

---

## Props

| Prop            | Type                         | Default | Description                           |
| --------------- | ---------------------------- | ------- | ------------------------------------- |
| `value`         | `number[]`                   | —       | Controlled value(s) — always an array |
| `defaultValue`  | `number[]`                   | —       | Uncontrolled default                  |
| `onValueChange` | `(values: number[]) => void` | —       | Change handler                        |
| `min`           | `number`                     | `0`     | Minimum value                         |
| `max`           | `number`                     | `100`   | Maximum value                         |
| `step`          | `number`                     | `1`     | Increment step                        |
| `disabled`      | `boolean`                    | `false` | Disables interaction                  |
| `className`     | `string`                     | —       | Additional CSS classes                |

---

## Examples

### Basic Controlled

```tsx
import { Slider } from 'xertica-ui/ui';
import { useState } from 'react';

const [value, setValue] = useState([50]);

<div className="space-y-2">
  <div className="flex justify-between text-sm">
    <span>Value</span>
    <span>{value[0]}%</span>
  </div>
  <Slider value={value} onValueChange={setValue} min={0} max={100} step={1} />
</div>;
```

### Sidebar Width Adjuster

```tsx
const { sidebarWidth, setSidebarWidth } = useLayout();

<Slider
  value={[sidebarWidth]}
  onValueChange={([v]) => setSidebarWidth(v)}
  min={200}
  max={480}
  step={8}
/>;
```

---

## AI Rules

- The `value` and `defaultValue` props are **always arrays** (`[50]`, not `50`) — even for single-thumb sliders.
- Access the current value as `value[0]` for single-thumb sliders.
- Always display the current value visually alongside the slider using a `<span>`.
- Do not use `onChange` — use `onValueChange`.

---

## Related Components

- [`Input`](./input.md) — For exact numeric entry
- [`Progress`](./progress.md) — For displaying a value without user interaction