Histogram Range

#Installation & usage

Use a histogram range when the shape of the data should guide the cut: file sizes, prices, response times, scores. People see where the values bunch up before they choose, and the bars inside the range show what they're keeping. For a range on its own, a Slider with two values is enough.

import { useState } from 'react'
import { HistogramRange } from '@youj/react'

export function SizeFilter({ bins }: { bins: number[] }) {
  const [range, setRange] = useState<[number, number]>([4.8, 38])
  return (
    <HistogramRange
      label="File size"
      bins={bins}
      min={0}
      max={64}
      step={0.1}
      value={range}
      onValueChange={setRange}
      format={(v) => `${v.toFixed(1)} MB`}
    />
  )
}

Pass counts you've already binned as bins, evenly spaced from min to max, or raw values as data and it counts them into binCount bins (40 by default); values outside min and max are left out. It's controlled with value and onValueChange, or uncontrolled with defaultValue; onValueCommitted fires once a drag or key press ends.

format turns a value into text: the readout above the plot, what a screen reader says for each thumb, and the axis. formatTick formats the axis on its own (say "0" rather than "0.0 MB"), and ticks picks the values it marks.

The accent stays on the track between the thumbs and on the readout, and the bars in range are a stronger neutral. tone="accent" puts the accent on those bars too. Each thumb is drawn as a caliper's jaw: an upright tab on the track with a hairline guide that rises through the plot, so you read each end of the cut against the bars it falls in.

#Description

#Code