Koala UI

Histogram Slider

Pro

A range slider with the distribution of the data drawn over it, so a price or date filter shows where the values fall before anyone drags.

$60 to $280

241 homes

Installation#

# One-time setup (tokens + lib helpers)npx koalaui-cli@latest init# Activate your Pro license (once per machine)npx koalaui-cli@latest login <key># Add this component (its dependencies come along)npx koalaui-cli@latest add histogram-slider

Usage#

Count your items into equal slices of the scale and pass them as bins. Everything else is a Slider range.

This example is part of Koala UI Pro

The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.

Get the code

Have a license? Unlock it here

Sizes#

size sets the height of the bars and the slider under them.

Variants#

variant tints the range and the bars inside it, so the two read as one selection. Bars outside it stay neutral.

Accessibility#

The bars are decorative and hidden from assistive tech; the two thumbs carry the meaning. Give the slider an aria-label and each thumb reads it with “start” or “end” added. Both thumbs follow the arrow keys, Page Up and Page Down, Home and End.

API reference#

HistogramSlider

A row of bars over a two-thumb Slider. Forwards the Slider props except orientation, inverted, marks and shape; className is merged last on the wrapper.

PropTypeDefaultDescription
binsnumber[]-How many items fall in each equal slice of min to max, in order.
valuenumber[]-The controlled range, two values. Pair with onValueChange.
defaultValuenumber[]-The initial range when uncontrolled. Defaults to the whole scale.
onValueChange(value: number[]) => void-Fires on every change while dragging or stepping.
minnumber0The lowest value.
maxnumber100The highest value.
size"sm" | "md" | "lg""md"Bar height (48, 64 or 80px) and the size of the slider.
variant"default" | "brand" | "success" | "warning" | "destructive""default"Tints the range and the bars inside it.
tooltipbooleantrueShows a value bubble above each thumb.
formatValue(value: number) => React.ReactNode-Formats the bubble value.
Data attributeDescription
data-activeOn each histogram-slider-bar whose centre is inside the range.

FAQ#

Between 20 and 40 reads well at the default width. Fewer looks blocky, and many more leaves bars thinner than a pixel gap.