Dual Range Slider

Two handles select a numeric range, with live value bubbles — ideal for price filters.

Two draggable handles select a numeric range, the middle of the track highlights the selected span, and a live value bubble appears above while dragging or focused, with built-in crossover prevention and full keyboard operation — commonly used for price filters, time spans, and similar cases.

Loading preview…

npx shadcn@latest add https://webberui.com/r/range-dual-slider.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Range minimummin

Range maximummax

100

Stepstep

Minimum gap at both endsminGap

<RangeDualSlider />

Installation

npx shadcn@latest add https://webberui.com/r/range-dual-slider.json

Or, once registries are configured in components.json, install it as @webberui/range-dual-slider.

Usage

import { RangeDualSlider } from "@/components/ui/range-dual-slider";

const [range, setRange] = React.useState<[number, number]>([1500, 10000]);

<RangeDualSlider
  min={0}
  max={20000}
  step={100}
  value={range}
  onChange={setRange}
  format={(v) => `NT$${v}`}
/>

Props

Prop	Type	Default	Description
`min`	`number`	`0`	Minimum of the range
`max`	`number`	`100`	Maximum of the range
`step`	`number`	`1`	Step size; both dragging and keyboard operation snap to the step grid
`value`	`[number, number]`	—	Controlled value: [low, high]
`defaultValue`	`[number, number]`	`[min, max]`	Initial value in uncontrolled mode
`onChange`	`(value: [number, number]) => void`	—	Callback for range changes (fires live during a drag)
`format`	`(value: number) => string`	`String`	Value formatting function, applied to the bubble and `aria-valuetext`
`minGap`	`number`	`step`	Minimum gap allowed between the two handles, preventing crossover
`labels`	`[string, string]`	`["最小值", "最大值"]`	Accessible labels for the two handles
`className`	`string`	—	Forwarded to the outermost container

Accessibility

Both handles are role="slider" with aria-valuemin / aria-valuemax / aria-valuenow, and their bounds narrow dynamically with the other handle's position
aria-valuetext uses the formatted readable text (for example "NT$1,500"), which reads more naturally in assistive technology
Full keyboard support: arrow keys adjust one step, PageUp / PageDown step ten times, Home / End jump to the ends
The value bubble also appears on keyboard focus, along with a clear focus ring
When the user has "reduce motion" enabled at the system level, the bubble and handle scaling appear instantly with no spring animation