KQ-205 · RANGE/DUAL

Range Dual

A dual-thumb range where the thumbs collide and shove. Drag one into the other and it carries the second along instead of stopping, so the span never inverts; the filled bar tracks between them and a value bubble lifts over whichever thumb is live. Both thumbs are real sliders — arrows, Home/End, and PageUp/Down all push the same way.

KQ-205 · RANGE/DUAL

Range $2,000 – $6,500

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/range-dual

Props

value: [number, number]; default —; Current low and high pair.
onValueChange: ([low, high]) => void; default —; Fires with the new pair.
min / max / step: number; default —; Bounds and increment.
format: (value) => string; default —; Formats the bubble and aria-valuetext.

Prop	Type	Default	Description
value	[number, number]	—	Current low and high pair.
onValueChange	([low, high]) => void	—	Fires with the new pair.
min / max / step	number	—	Bounds and increment.
format	(value) => string	—	Formats the bubble and aria-valuetext.