# Slider

> One value or a range: a press throws the nearest thumb there, a drag tracks the finger, and the value rises out of the thumb.

Most sliders jump on a click and hide the value until you let go. Here a press on the track throws the nearest thumb there with a slight overshoot, then it follows the finger 1:1, snapped to the step; the value rises out of the thumb while you move it. Two thumbs make a range and never cross.

## Install

```bash
npx shadcn@latest add https://hairlineui.com/r/slider.json
```

Needs React 19, Tailwind CSS v4 and shadcn/ui theme variables (any style, light and dark). Icons from lucide-react.

- npm: none
- Hairline UI components it needs (the CLI installs them too): `ui-interaction-motion`
- Docs and live preview: https://hairlineui.com/ui/slider
- Registry item (source): https://hairlineui.com/r/slider.json

## Usage

```tsx
import { Slider } from "@/components/ui/slider";

<Slider label="Volume" defaultValue={60} />
<Slider label="Price" min={0} max={200} step={5} defaultValue={[40, 120]} format={(v) => `$${v}`} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value / defaultValue` | `number \| number[]` | – | One number, or two for a range. |
| `onValueChange` | `(value: number[]) => void` | – | Every change. |
| `onValueCommit` | `(value: number[]) => void` | – | When a drag or key press ends. |
| `min / max / step` | `number` | `0 / 100 / 1` | Range and snapping. |
| `format` | `(v: number) => string` | – | Bubble and aria-valuetext. |
| `label` | `string` | – | Accessible name. |

## States

- **press**: The nearest thumb is thrown to the point (420ms, slight overshoot) and grows to 1.15.
- **drag**: The thumb follows 1:1, snapped to step.
- **bubble**: The value rises from a 3px blur above the thumb and sinks 700ms after you stop.
- **focus**: Ring and halo on the thumb from the keyboard.

## What it handles

A slider needs pointer capture, snapping, keyboard steps and ARIA values on each thumb; most get one of these wrong.

- **Thrown, then tracked**: A press animates the jump; the drag that follows has no lag.
- **Range that never crosses**: Pass two values; each thumb stops at the other.
- **Keyboard**: Arrows step, Page Up/Down step ten, Home/End jump.
- **Phone friendly**: Vertical page scroll still works when a drag starts on it.

## Replaces

range input styling, dual-thumb range slider, value tooltip

## Where it fits

- **Price filters**: A range from $10 to $90 in a shop sidebar.
- **Volume and playback**: A single value with a live bubble.
- **Settings**: Thresholds such as "alert above 80%".
- **Image and design tools**: Opacity, blur and size controls.

## Notes

- Each thumb is role="slider" with aria-valuenow and aria-valuetext.
- Reduced motion: thumbs move at once, no bubble motion.

License: MIT (https://hairlineui.com/license#components)