## Number Scrubber (S—088)

Design-tool number fields: drag the label left or right to scrub the value, or click to type it.

- URL: https://sundaeui.dev/components/number-scrubber
- Category: Forms & inputs · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/number-scrubber.json`
- Tags: design-tool, scrub, number, drag, input, inspector

Like Figma’s inspector: the label is a handle. Drag across it and the value changes with your pointer, with Shift for ×10 and Alt for ×0.1. The cursor locks to ew-resize while scrubbing.
Click the number to type an exact value. Arrow keys step, with the same modifiers.

### Usage

```tsx
import { NumberScrubber } from '@/components/sundae/number-scrubber'

<NumberScrubber />
```

### Props

- `label` (`string`, required): Short label used as the drag handle.
- `value / defaultValue` (`number`): Value.
- `min / max` (`number`): Bounds.
- `step` (`number`, default `1`): Step per pixel / key.
- `unit` (`string`): Suffix such as px or °.
- `onValueChange` (`(n: number) => void`): Called on change.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Inspectors, editors, canvas tools, dense settings panels.

### When not to use

- Consumer forms where dragging a label is unexpected.

### Accessibility

- The input is a spinbutton with min/max; the drag handle is pointer-only and aria-hidden.
- Arrow keys step; Shift steps by ten.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ↑ / ↓: Step
- Shift + ↑ / ↓: Step ×10
- Enter: Commit typed value