Histogram Range

Price range with a histogram, two thumbs and inputs. Pro · Forms and input › Checkboxes and sliders

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add histogram-range

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { HistogramRange } from 'valyro-ui-pro';

Prop	Type	Default
`histogram` *	`number[]`		Counts per bucket, evenly spread from `min` to `max` (e.g. listings per price step).
`min` *	`number`		Lowest selectable value.
`max` *	`number`		Highest selectable value.
`step`	`number`	`1`	Granularity of the thumbs and the fields. Default 1.
`value`	`[number, number]`		Selected range (controlled).
`defaultValue`	`[number, number]`		Initial `value` when uncontrolled.
`onValueChange`	`(value: [number, number]) => void`		Called with the new `value` when it changes.
`prefix`	`ReactNode`		Text before the numbers in the fields: " quot;, "₽".
`suffix`	`ReactNode`		Text after the numbers in the fields: "kg", "₽".
`showInputs`	`boolean`	`true`	Shows the two number fields under the slider. Default true.
`histogramHeight`	`number`	`56`	Height of the histogram in px. Default 56.
`formatValue`	`(value: number) => string`		Formats values for the thumbs' screen reader text.
`name`	`string`		Form field name; the range submits as two values.
`locale`	`string`		BCP 47 locale for the numbers in the fields.
`disabled`	`boolean`	`false`	Disables the whole control.
`labels`	`Partial<HistogramRangeLabels>`		Overrides for the built-in English text; keys left out keep their defaults.