# Range Slider

Two-thumb slider for picking a range, with smooth thumbs and a tick you can feel at each step. A chart behind the track lights up inside your range, and the labels merge when they meet.

> Primitive · Pro · Forms & Inputs — React Native, Expo Go incompatible (dev build required).

## Install

```bash
npx @lumioui/cli add pro/range-slider
```

## Import

```tsx
import { RangeSlider } from "@/components/ui/range-slider/range-slider";
```

## Variants

- `budget` — Salary filter: `npx @lumioui/cli add pro/range-slider-budget`
- `states` — Discovery preferences: `npx @lumioui/cli add pro/range-slider-states`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `[number, number]` | Current [low, high] values (controlled). Omit for uncontrolled. |
| `defaultValue?` | `[number, number]` | Initial [low, high] for uncontrolled use. Default [min, max]. |
| `onValueChange?` | `(value: [number, number]) => void` | Called with the new [low, high] each time a thumb crosses a step. |
| `onSlidingComplete?` | `(value: [number, number]) => void` | Fires once when the range settles — finger lift, tap, key or a11y action. |
| `min?` | `number` | — |
| `max?` | `number` | — |
| `step?` | `number` | — |
| `minGap?` | `number` | Smallest allowed distance between the thumbs, in value units. Default one step. |
| `disabled?` | `boolean` | — |
| `showTicks?` | `boolean` | Render a tick dot at each step (skipped above 50 steps). Default true. |
| `lit?` | `boolean` | Ticks inside the range switch on as the thumbs pass them. Default false. |
| `intensity?` | `number` | 0–1 brightness of the fill — couple it to what the range still  matches. Implies `lit`. Default 1. |
| `histogram?` | `readonly number[]` | The data behind the track — one bar per equal bucket across [min, max]. |
| `histogramHeight?` | `number` | Height of the histogram in pt. Default 56. |
| `labels?` | `"none" | "active" | "always" | boolean` | Value bubbles above the thumbs: "active" while touched, "always", or  "none" (default). `true` means "always". |
| `formatValue?` | `(value: number) => string` | Formats a value for bubbles and screen readers. Default String(v). |
| `className?` | `string` | — |

Source: https://lumioui.com/components/range-slider