Kinetiq

KQ-550 · RANGE/HISTOGRAM

Range Histogram

A price filter you can see through. A histogram of the whole population sits above a dual-thumb range, and dragging a thumb fades every bin outside the selection on a plain opacity tween while the match count rolls to its new figure from a motion value on glide. The thumbs are real sliders carrying aria-valuetext: arrows step, Shift steps ten, Home and End run to the ends, and a thumb pushes its partner rather than crossing it.

KQ-550 · RANGE/HISTOGRAM
Basinworks rent1,405matches
$1,200$2,400
  • $800 to $900: 36
  • $900 to $1,000: 63
  • $1,000 to $1,100: 57
  • $1,100 to $1,200: 55
  • $1,200 to $1,300: 106
  • $1,300 to $1,400: 133
  • $1,400 to $1,500: 95
  • $1,500 to $1,600: 107
  • $1,600 to $1,700: 173
  • $1,700 to $1,800: 157
  • $1,800 to $1,900: 98
  • $1,900 to $2,000: 125
  • $2,000 to $2,100: 157
  • $2,100 to $2,200: 104
  • $2,200 to $2,300: 65
  • $2,300 to $2,400: 85
  • $2,400 to $2,500: 78
  • $2,500 to $2,600: 40
  • $2,600 to $2,700: 28
  • $2,700 to $2,800: 33
  • $2,800 to $2,900: 22
  • $2,900 to $3,000: 9
  • $3,000 to $3,100: 8
  • $3,100 to $3,200: 7
1405 of 1841 between $1,200 and $2,400

$1,200 – $2,400 · 1405 of 1841 homes

Install

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

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

Props

bins
HistogramBin[]
default —
Ordered bins, left to right; their outer ends set the slider's bounds.
value / defaultValue
[number, number]
default —
Controlled or initial range; it defaults to the full span of the bins.
onValueChange
(range: [number, number]) => void
default —
Fires on every drag frame and every keyboard step.
format
(value: number) => string
default rounded en-US
Formats the two ends and the sliders' aria-valuetext.
step
number
default a quarter of the narrowest bin
Arrow-key step; Shift and the page keys move ten of them.
height
number
default 88
Histogram height in px. The width is fluid and measured.
label
string
default —
Names the filter for assistive technology and captions the match readout.