Histogram slider
A range slider over a histogram of the data behind it, with inked in-range bars, clickable bins, min and max inputs and a live count of matching items.
Preview
Price per night
of 420 stays
$20$500
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | number[] | — | Raw values behind the filter; drives the histogram and the count. |
| label | string | — | Heading and accessible name (thumbs get "minimum" / "maximum"). |
| min / max | number | data extent | Slider bounds. |
| step | number | 1 | Slider and snap step. |
| bins | number | 32 | Number of equal-width histogram bins. |
| value | [number, number] | — | Controlled range. |
| defaultValue | [number, number] | [min, max] | Uncontrolled starting range. |
| onValueChange | (value: [number, number]) => void | — | Called on drag, keys, bar click, input commit and reset. |
| formatValue | (value: number) => string | String | Formats end labels, tooltip and thumb aria-valuetext. |
| prefix | string | — | Text before the input values, e.g. "$". |
| noun | string | "items" | Plural noun for the count. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.