UI
← Home

Scrubber

A numeric field you change by dragging horizontally across it — the design-tool / DAW “scrub” control. Drag right to increase, left to decrease (one step per few pixels), or operate it from the keyboard: ArrowUp/ArrowRight increase, ArrowDown/ArrowLeft decrease, Home/End jump to the bounds. The value is always clamped to its range.

  • Axe
  • Focus
  • Drag
  • Cancel

Preview

50%

Installation

npx shadcn@latest add https://ui.publictheta.com/r/scrubber.json

Conformance

Verified against the @publictheta/ui-spec scrubber specification on both the React and vanilla reference implementations, across Chromium, Firefox, and WebKit.

  • Axe — No WCAG 2 A/AA axe-core violations
  • Focus — A visible focus indicator appears on keyboard focus (WCAG 2.4.7)
  • Drag — Pointer-drag surfaces don't select text or hijack touch scrolling
  • Cancel — Escape mid-drag (and pointercancel, when the OS takes the gesture) restores the value the drag started from and ends it, so the release commits nothing

See the full conformance matrix across all components.