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

PropTypeDefaultDescription
value[number, number]Current low and high pair.
onValueChange([low, high]) => voidFires with the new pair.
min / max / stepnumberBounds and increment.
format(value) => stringFormats the bubble and aria-valuetext.