Number Scrubber
Design-tool number fields: drag the label left or right to scrub the value, or click to type it.
number-scrubber.tsxnumber-scrubber.css
Checking access…
Overview
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.
When to use
- Inspectors, editors, canvas tools, dense settings panels.
When not to use
- Consumer forms where dragging a label is unexpected.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/number-scrubber.json$
npx shadcn@latest add https://sundaeui.dev/r/number-scrubber.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/number-scrubber.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/number-scrubber.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy number-scrubber.tsx and number-scrubber.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { NumberScrubber } from '@/components/sundae/number-scrubber'
<NumberScrubber />Props
| Prop | Type | Default |
|---|---|---|
label*Short label used as the drag handle. | string | — |
value / defaultValueValue. | number | — |
min / maxBounds. | number | — |
stepStep per pixel / key. | number | 1 |
unitSuffix such as px or °. | string | — |
onValueChangeCalled on change. | (n: number) => void | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
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.
Customization
- Colours are CSS custom properties on .sd-nsc; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- ↑ / ↓
- Step
- Shift + ↑ / ↓
- Step ×10
- Enter
- Commit typed value
FAQ
- Is Number Scrubber free?
- Number Scrubber is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Number Scrubber?
- Run npx shadcn@latest add https://sundaeui.dev/r/number-scrubber.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Number Scrubber support keyboard and screen readers?
- The input is a spinbutton with min/max; the drag handle is pointer-only and aria-hidden. Arrow keys step; Shift steps by ten.
- Does Number Scrubber respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All forms →Unit Input
Forms · RefinedOTP Field
Forms · RefinedRolling Counter
Forms · Playful- Pro
Wheel Picker
Forms · Refined Password Strength
Forms · RefinedStar Rating
Forms · Refined