# Slider (/docs/slider)

A Base UI range control with multiple thumb styles, labels, ticks, sizing, and an optional live value tooltip.

## Install

```bash
npx shadcn@latest add https://4af.selfsimilar.dev/r/slider.json
```

## Usage

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

<Slider aria-label="Volume" defaultValue={60} showValueTooltip />

<Slider aria-label="Price range" range defaultValue={[20, 80]} />

<Slider aria-label="Volume" label="Volume" defaultValue={60} inlineLabel />
```

## API

**Main export:** `Slider`

A controlled or uncontrolled numeric slider with a spring-animated fill. Optional `label`,
`showValue`, `showTicks`, and `showValueTooltip`.

| `thumb` | Shape |
| --- | --- |
| `bar` | A thin handle that stretches taller while grabbed. |
| `circle` | A round thumb inside a thick rounded rail. The fill wraps the thumb and stays behind it at the minimum. |
| `knob` | A small dot on a thin rail (4px at `md`, 2px at `sm`) that it overhangs. It grows by a quarter while dragged. Its rail shows the fill only, never ticks. |

`range` renders two thumbs with a fill between them. Pass `[start, end]` to `value` or
`defaultValue`; the range callback receives the updated tuple. Without `range`, the value is a
single number.

## Bar thumb

On the `bar` thumb, ticks are hidden at rest and the fill is `foreground/15`. While the slider is
in use (hovered, dragged, or keyboard-focused), the ticks fade in and the fill steps up to
`foreground/20`. `circle` and `knob` keep both constant.

`inlineLabel` moves the label and the value inside the bar, one at each end, replacing the row
above it. Within 8px of either, the thumb dodges: it fades to 15% opacity and drops its grab
stretch, then restores as it moves away. It never dodges at either end of the rail. The thumb
carries `data-dodged` while dodging; under reduced motion only the fade remains. The inline value
is `muted-foreground` at rest and `foreground` while the slider is in use. `circle` and `knob`
ignore `inlineLabel`.

## Value tooltip

`showValueTooltip` (off by default) shows the live value above the thumb while it is hovered or
keyboard-focused. It stays open while dragging, follows the thumb, and closes after release once
the pointer has left the thumb.