Drag & physics
Number scrubber
A number you drag. Pull it sideways and the value runs under a sliding ruler; flick and it coasts on inertia, stretches like rubber at its limits and springs back. Double-click to type.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { NumberScrubber } from '@vizzele/react';
<NumberScrubber label="Opacity" value={opacity} onChange={setOpacity}
min={0} max={100} suffix="%" />
<NumberScrubber label="Radius" defaultValue={12} step={0.5} min={0} suffix="px" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Visible label and accessible name. |
value / defaultValue / onChange | number | — | Controlled or not. |
min / max / step | number | -∞ / ∞ / 1 | Range; decimals follow the step. |
prefix / suffix | ReactNode | — | Units around the number. |
pixelsPerStep | number | 4 | Drag sensitivity. |
Accessibility
- role="spinbutton": arrows step (Shift ×10), Page Up/Down, Home/End at the limits.
- Enter or double-click opens a text field; Enter saves, Escape cancels.
- Shift while dragging = ×10, Alt = fine. Inertia is off with reduced motion.