Range slider
A dual-thumb range with a histogram behind the track, minimum gap, typed min/max inputs, tick labels and an estimated match count.
Preview
Price$80 – $260 · ≈1,124 of 1,749
Session length30 min – 75 min
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Visible label and group name; thumbs become “Minimum …” and “Maximum …”. |
| min / max / step | number | 0 / 100 / 1 | Bounds and step. |
| value / defaultValue | [number, number] | [min, max] | Selected range. |
| onValueChange | (value: [number, number]) => void | — | While dragging and on input commits. |
| onValueCommit | (value: [number, number]) => void | — | When a drag ends or an input commits. |
| minGap | number | 0 | Smallest distance between the two values. |
| histogram | number[] | — | Bucket counts from min to max, drawn behind the track; in-range bars turn ember. |
| ticks | number[] | — | Values labelled under the track. |
| formatValue | (value: number) => string | String | Formats the readout, ticks and thumb value text. |
| inputs | boolean | true | Show typed Min/Max inputs. |
| inputPrefix | string | — | Unit inside the inputs, e.g. "$". |
| disabled | boolean | false | Dims and disables the control. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.