Search blocks by description or jump to a page.
A numeric range facet with a distribution histogram, a dual thumb slider, min and max readouts, quick range presets, and a live match count.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Range Filter Histogram is the numeric facet for a deals pipeline: twelve count bars show how deals distribute by amount, a dual thumb slider sits underneath and lights up the bars inside the selected band, Minimum and Maximum readouts track the thumbs, and four presets (Any amount, Under $3k, $3k to $8k, Over $8k) jump the range in one tap. A footer reads the live match count, 123 deals in range, next to an Apply filter button.
Buckets are one const array; the in-range test compares each bucket span against the slider values, and the same predicate drives both the highlighted bars and the footer sum. Presets are just min and max pairs, so a click and a drag land on identical state.
Reach for this block anywhere users filter a list by a numeric column, amount, duration, file size, or score, wired to an endpoint that returns bucketed counts. The distribution is the point: it shows where values cluster so the range you pick is informed rather than a guess.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the deal amount facet in a CRM. Other range histograms:
Tip: bucket the distribution server side and return counts only; sending raw rows just to draw bars wastes the payload the histogram is meant to save.