Number scrubber
Drag-to-scrub numeric field with acceleration, Shift/Alt modifiers, typed entry, units, bounds and spinbutton keyboard support.
Preview
132 × 88
Rectangle
Drag a label to scrub. Shift ×10, Alt ×0.1. Click to type.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | — | Short visible label and drag handle ("X", an icon). |
| name | string | label text | Accessible name when the label is short or an icon. |
| value | number | — | Controlled value. |
| defaultValue | number | 0 | Initial value when uncontrolled. |
| onValueChange | (value: number) => void | — | Called on every change. |
| onValueCommit | (value: number) => void | — | Called when a drag, key step or typed edit ends. |
| min | number | -Infinity | Lower bound. |
| max | number | Infinity | Upper bound. |
| step | number | 1 | Base step; decimals follow it. |
| unit | string | — | Unit after the number (px, %, °). |
| pixelsPerStep | number | 3 | Drag distance per step at slow speed. |
| acceleration | boolean | true | Speed up fast drags (×2 brisk, ×4 flick); off gives a constant rate. |
| wrap | boolean | false | Wrap around between min and max (angles). |
| disabled | boolean | false | Disable dragging and typing. |
| inputName | string | — | Form field name. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.