## Range Slider (S—026)

A dual-thumb range slider with a live histogram, number fields and full keyboard control.

- URL: https://sundaeui.dev/components/range-slider
- Category: Forms & inputs · Art direction: Understated
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, Tailwind CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/range-slider.json`
- Tags: tailwind, form, filter, range, react, input, histogram, slider

For filtering by price, size or time, where people need to see the shape of the data. A histogram above the track shows the distribution, and bars inside the selected range fill in as the thumbs move, so it is obvious where most results are.
Drag either thumb, or click the track and the nearest thumb jumps there. Thumbs keep a minimum gap and snap to the step. Number fields below accept exact values and clamp on blur. Arrow keys move by step, Page Up and Page Down by a tenth, and Home and End to the bounds.
Use it for marketplace and search filters. For a single value, use a native range input.

### Usage

```tsx
import { RangeSlider } from '@/components/sundae/range-slider'

const [price, setPrice] = useState<[number, number]>([80, 320])
<RangeSlider label="Nightly price" min={0} max={500} step={5} value={price} onChange={setPrice} histogram={buckets} format={(n) => '$' + n} />
```

### Props

- `min / max / step` (`number`, required): Bounds and increment (step defaults to 1).
- `value / onChange` (`[number, number]`, required): Controlled range.
- `label` (`string`, required): Group label. Thumbs are named Minimum and Maximum.
- `histogram` (`number[]`): Evenly spaced bucket counts.
- `format` (`(n) => string`): Display and aria-valuetext formatter.
- `minGap` (`number`, default `step`): Minimum distance between thumbs.

### Accessibility

- Each thumb is a role="slider" with min, max, now and valuetext. The bounds update as the other thumb moves.
- Arrows, Page Up/Down, Home and End are supported. The current range is announced politely.
- Number fields give a precise, non-drag alternative.