# Range slider

> Two-thumb range with value bubbles and an optional live histogram.

Component · Pro · https://lodeui.com/components/range-slider

## When to use

- Filtering by a range: price, dates as numbers, sizes, scores.

## When not to use

- One value: use a slider.
- Exact numbers: add inputs beside it.

## Installation

```bash
npx shadcn@latest add @lode/range-slider
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

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

export function PriceFilter() {
  const [range, setRange] = React.useState<[number, number]>([100, 400]);
  return <RangeSlider aria-label="Price" min={0} max={600} step={10} value={range} onValueChange={setRange} format={(n) => `$${n}`} histogram={counts} />;
}
```

## API reference

### RangeSlider

Two thumbs on one track, with bubbles while active and an optional histogram.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / defaultValue / onValueChange | `[number, number]` | – | Controlled or uncontrolled. |
| onValueCommit | `([number, number]) => void` | – | Once per drag end or key press. |
| min / max / step / minGap | `number` | `0 / 100 / 1 / 0` | Range, snapping and minimum distance between thumbs. |
| format | `(n) => string` | `String` | Labels and aria-valuetext. |
| histogram | `number[]` | – | Bars spread evenly across the range; bars inside the selection highlight. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / ↓ | Decrease the focused thumb |
| → / ↑ | Increase |
| Page Up / Page Down | 10% steps |
| Home / End | Min or max |

## Accessibility

- Each thumb is a labelled slider ("Price minimum", "Price maximum") whose limits respect the other thumb.
- Clicking the track moves the nearest thumb and focuses it.

## Motion

- Histogram bars grow in a wave and change color as the range moves; thumbs grow while active; bubbles pop above them.

## Responsive behavior

- Fills its container; touch drags work anywhere on the track.

## Performance

- Drags use window listeners and only update the two values.

## Notes for AI

- Fetch results in onValueCommit, not onValueChange.

## Related

- [Slider](https://lodeui.com/components/slider) — Drag, click or use the keys. The value rides above the thumb while you drag.
- [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.
- [Bar chart](https://lodeui.com/components/bar-chart) — Bars that grow in and morph between datasets, with a hover readout.