Range Slider

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/range-slider

Usage

import { RangeSlider } from "@/components/ui/range-slider/range-slider";
<RangeSlider />

Examples

Salary filter

The salary filter in a job-search app.

Discovery preferences

Discovery preferences in a dating app.

API reference

Prop Type Default
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 0
max number 100
step number 1
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.

 true
lit boolean

Ticks inside the range switch on as the thumbs pass them. Default false.

 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.

 HIST_H
labels "none" | "active" | "always" | boolean

Value bubbles above the thumbs: "active" while touched, "always", or "none" (default). true means "always".

 "none"
formatValue (value: number) => string

Formats a value for bubbles and screen readers. Default String(v).

 —
className string —