Skip to content
quartiledocsv0.1
GitHub

RangeSlider

Preview

A two-thumb slider for a range, with an optional histogram of the values it filters drawn behind the track.

Example

Order value$40 – $180
2,419 of 3,295 orders in range
<RangeSlider
  label="Order value"
  min={0}
  max={360}
  step={10}
  value={amount}
  onChange={setAmount}
  format={(v) => `$${v}`}
  distribution={histogram}            // counts in 36 equal bins across [0, 360]
  thumbLabels={['Minimum order value', 'Maximum order value']}
  caption={(r) => `${inRange(r)} of ${orders.length} orders in range`}
/>

Usage

distribution is a list of counts in equal-width bins across [min, max]; bins inside the range are drawn in the signal color. onChange fires while dragging and onChangeEnd once at the end, which suits expensive filtering. minDistance keeps the thumbs apart. Slider is the single-thumb version.

Props

RangeSlider

PropTypeDefaultDescription
minnumber0—
maxnumber100—
stepnumber1—
value[number, number]——
defaultValue[number, number]——
onChange(value: [number, number]) => void——
onChangeEnd(value: [number, number]) => void—Called once when a drag or key press ends.
format(value: number) => stringidentityFormats the readout and each thumb's aria-valuetext.
labelReactNode——
showValuebooleantrueShow "lo – hi" at the right of the label row. Default true.
distributionnumber[]—Histogram counts in equal-width bins across [min, max]. Drawn behind the track: bins inside the range in signal, the rest muted. Controls that filter data show the data they filter.
distributionHeightnumber46Height of the histogram in px.
captionReactNode | ((range: [number, number]) => ReactNode)—Line under the track, e.g. "2,814 of 3,402 orders in range".
minDistancenumber0Smallest allowed gap between the two values.
thumbLabels[string, string]['Minimum', 'Maximum']Accessible names for the two thumbs.
disabledboolean——
classNamestring——
styleCSSProperties——
aria-labelstring—Accessible name for the group when there is no visible label.

Accessibility

  • Each thumb is a slider named by thumbLabels, with aria-valuetext from format.
  • Arrow keys move a thumb by one step; Shift moves it by a larger step.
Report an issueBuilt Oct 21, 2026