Skip to content

ScrubInputRoot

ScrubInputRoot is the headless root primitive for drag-to-scrub numeric input.

It manages:

  • mixed-value display
  • editing vs scrubbing state
  • pointer-driven numeric scrubbing
  • commit semantics for finished edits

Props

PropDefaultType
modelValue*
Current numeric value or mixed sentinel.
number | symbol
min
Minimum allowed value.
-Infinitynumber | undefined
max
Maximum allowed value.
Infinitynumber | undefined
step
Scrub step multiplier.
1number | undefined
sensitivity
Pointer sensitivity multiplier.
1number | undefined
placeholder
Placeholder for mixed values.
Mixedstring | undefined

Model

PropDefaultType
v-model:modelValue*
Writable numeric model.
number

Events

EventPayloadDescription
update:modelValuevalue: numberEmitted while scrubbing or editing.
commitvalue: number, previous: numberEmitted when an edit interaction is committed.

Slots

SlotPropsDescription
default{ modelValue: number | symbol, displayValue: string, isMixed: boolean, editing: boolean, scrubbing: boolean, startScrub: (event: PointerEvent) => void, startEdit: () => void, commitEdit: (event: Event) => void, keydown: (event: KeyboardEvent) => void, placeholder: string }Full scrub-input render contract.

Example

vue
<ScrubInputRoot v-model:model-value="value" @commit="commit" v-slot="ctx">
  <div @pointerdown="ctx.startScrub">
    <ScrubInputDisplay />
    <ScrubInputField class="w-16" />
  </div>
</ScrubInputRoot>

Released under the MIT License.