Scrub Field

Number field you scrub by dragging the chip, with a rubber band past its bounds, a ghost delta riding the pointer, modifier keys for coarse and fine steps, and click to type.

Default

Drag the chip sideways to scrub the number. Hold Shift for coarse steps and Alt for fine ones. Click without moving to type a value.

Radius

Customize

Accent

Chip

LabelSuffix

Default24

Min0

Max100

Step

Size

Sensitivity2px

Rubber Reach8%

Return300ms

Coarse10x

Fine0.1x

Ghost DeltaDirty RingFillDisabled

API Reference

ScrubField

Prop	Type	Default	Description
`label`	`string`	`'Radius'`	The field name. Drag anywhere on the chip to scrub, click without moving to type.
`suffix`	`string`	`'px'`	Unit after the number, also read by screen readers.
`value`	`number`	`undefined`	Controlled value, bound with v-model:value. Changes from outside land without motion.
`defaultValue`	`number`	`24`	Initial value and the dirty baseline. The ring turns off exactly here.
`min`	`number`	`0`	Lower bound. The rubber band starts here.
`max`	`number`	`100`	Upper bound. The rubber band starts here.
`step`	`number`	`1`	Granularity of drag and arrows. Sets the decimals shown.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Chip height 28, 34 or 44 pixels.
`sensitivity`	`number`	`2`	Pixels of travel per step. 1 is twitchy, 6 is precise.
`rubberReach`	`number`	`8`	How far past a bound the number can be pushed, as a percent of the range. 0 is a hard stop.
`returnDuration`	`number`	`300`	Duration in milliseconds of the critically damped snap back to the bound.
`coarseMultiplier`	`number`	`10`	Step multiplier while Shift is held, and for Page Up and Page Down.
`fineMultiplier`	`number`	`0.1`	Step multiplier while Alt or Option is held. Adds a decimal.
`showDelta`	`boolean`	`true`	Shows the signed change in a pill riding the pointer.
`showDirty`	`boolean`	`false`	Rings the chip while the value differs from the default.
`showFill`	`boolean`	`true`	Fills the chip from the left in proportion to where the value sits in the range.
`accent`	`string`	`'#f5f5f5'`	Fill band, dirty ring and delta pill.
`chipColor`	`string`	`'#27272a'`	Chip surface. Text inherits from the page.
`disabled`	`boolean`	`false`	Dims the chip and ignores input.

Event	Description
`change`	Emitted on every step, key and typed commit.
`commit`	Emitted on release, on a key step and on blur or Enter.
`update:value`	Emitted alongside change, for v-model:value.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Arrow Up` + `Arrow Down`	Steps the value. Shift multiplies the step, Alt divides it.
`Page Up` + `Page Down`	Steps by the coarse multiplier.
`Home` + `End`	Jumps to the minimum or the maximum.
`Enter`	Commits the typed value.
`Escape`	Cancels typing, or cancels a drag and restores the value from before it.

The field is a spinbutton with aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext including the suffix. The label is linked to the input.
With prefers-reduced-motion the chip no longer leans and the number snaps back without a spring.

Rubber Segment Shredder