# Scrub Number

A number field you drag sideways to change: a tick ruler opens out from the pointer with a magnified patch under the marker, notches every fifth tick, soft limits, faster steps on a quick drag, a finer step on Shift, typing on click and reset on double-click.

- Page and source: https://uibrik.com/components/scrub-number
- Install: `npx shadcn@latest add https://uibrik.com/r/scrub-number.json`
- Packages (installed by the CLI): @number-flow/react, @tabler/icons-react, motion
- Import: `import { ScrubNumber } from "@/components/uibrik/scrub-number/scrub-number"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| sensitivity | `number` | `6` | Pixels of slow drag per step. Higher is slower and more precise. |
| acceleration | `number` | `1` | How much a fast drag speeds up, so large ranges don't need a long drag. Slow drags stay precise. 0 turns it off. |
| fine | `number` | `10` | Holding Shift while dragging divides the step by this. Alt with the arrow keys does the same. 1 turns it off. |
| radius | `number` | `16` | Corner radius of the field. |
| label | `string` |  | Shown on the left; also the input's label. |
| value / onChange | `number / (value) => void` |  | Controlled value. onChange fires on every step of a drag. |
| defaultValue | `number` | `0` | Value on mount when uncontrolled. |
| onCommit | `(value) => void` |  | Fires once when a drag, arrow key or typed edit settles. |
| min / max | `number` |  | Limits. The ruler ends at them and the marker stretches a little past before springing back. |
| resetValue | `number` | `defaultValue` | Value a double-click or double-tap returns to. |
| step | `number` | `1` | Smallest change; also sets the decimals shown. |
| suffix | `string` |  | Text after the number, e.g. "px", "%" or "°". |
| disabled | `boolean` | `false` | Dims the field and ignores input. |
| className | `string` |  | Classes for the field. |