Skip to content
Pinky UI

forms

Unit Scrubber

A numeric value with a unit can be scrubbed through a bounded surface while manual input remains precise.

  • forms
  • numeric
  • scrub
  • unit
  • pointer
Related pattern

A unit-aware scrub field; Tactile Range remains the generic bounded preference control.

Live preview

Radius24 px
drag to adjust0–64 px
pxdirect value · arrows

Quick usage

usage
import { UnitScrubber } from "@pinky-ui/systems";

<UnitScrubber label="Radius" defaultValue={24} unit="px" />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
stepnumber1Bounded increment shared by pointer, keyboard and manual entry.
classNamestring—Styles the outer interaction surface.

Accessibility

  • The value remains a native number input with a visible unit; arrows and direct entry do not require scrubbing.
  • Pointer capture ends on up, cancel and lost capture so page scrolling and later interactions remain safe.

Performance

  • Pointer movement updates one bounded numeric value and no document listener is retained after the gesture.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Design tools, compact settings and values where spatial adjustment is meaningful

When not to use

  • Unbounded numeric data or values where dragging would reduce precision

Skill

Purpose

Use Unit Scrubber for bounded design or product values where horizontal adjustment is meaningful but manual precision must remain available.

Interaction

Drag the labelled surface to change the value, while a native number input provides direct entry and arrow-key increments. Keep the unit and bounds visible.

Usage

tsx
<UnitScrubber label="Radius" defaultValue={24} min={0} max={64} unit="px" />

Accessibility

Never make dragging the only path. Use a real number input, clear units, bounded values and pointer-capture cleanup on up, cancel and lost capture.

Reduced motion

Update the value without thumb travel. The number, unit and bounds remain the primary feedback.

Open this skill on its own page