# Slider

> Drag, click or use the keys. The value rides above the thumb while you drag.

Component · Free · https://lodeui.com/components/slider

## When to use

- Picking a value from a continuous range where approximate is fine: volume, budget, rollout percentage.

## When not to use

- Exact values: use a number field or input.
- Small counts like seats: use a number field.

## Installation

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

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { Slider } from "@/components/ui/slider";

export function Budget() {
  const [budget, setBudget] = React.useState(4500);
  return <Slider aria-label="Budget" value={budget} onValueChange={setBudget} min={500} max={10000} step={250} format={(n) => `$${n}`} />;
}
```

## API reference

### Slider

Drag the thumb or click the track. A value bubble rides above the thumb while dragging.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / defaultValue | `number` | `50` | Controlled or uncontrolled value. |
| onValueChange | `(n: number) => void` | – | Called while dragging. |
| onValueCommit | `(n: number) => void` | – | Called once when the drag ends or a key is released. |
| min / max / step | `number` | `0 / 100 / 1` | Range and snapping. |
| format | `(n: number) => string` | – | Shows the bubble and sets aria-valuetext. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / ↓ | Decrease by step |
| → / ↑ | Increase by step |
| Page Up / Page Down | Change by 10% of the range |
| Home / End | Min or max |

## Accessibility

- The thumb is role="slider" with min, max, now and valuetext.
- Use onValueCommit for expensive work so screen-reader users don't trigger it on every step.

## Motion

- The thumb grows on hover (1.08) and press (1.2).
- The bubble pops in above the thumb while dragging.

## Responsive behavior

- Fills its container width; touch dragging uses pointer capture.

## Performance

- Only the fill width and thumb position change while dragging.

## Notes for AI

- Save to the server in onValueCommit, not onValueChange.

## Related

- [Number field](https://lodeui.com/components/number-field) — A stepper you can press, hold, scrub, or type into. Push past a limit and it pushes back.
- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.
- [Gauge](https://lodeui.com/components/gauge) — Half-circle gauge with warning and danger thresholds.