Loading…

Scrubber

beta

A design-tool number field: drag across a labelled bar to scrub a value, step it from the keyboard, or type it.

Forms
1 file
2 npm packages
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add scrubber

npm packages installed: class-variance-authority, radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { Scrubber } from "@/components/ui/scrubber";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Sizes
Without Ticks
Drag Only
Disabled

API

Generated from the component's own types, so a prop cannot appear here without existing.

<Scrubber>

Prop	Type	Default
`decimals` Decimal places shown. Defaults to the precision of `step`.	`number`	—
`defaultValue`	`number`	—
`disabled`	`boolean`	`false`
`editable` Allow typing an exact value (Enter or double-click).	`boolean`	`true`
`formatValue` Formats the displayed value and `aria-valuetext`. Defaults to `decimals` places.	`(value: number) => string`	—
`label` Visible label at the start of the bar. It also names the slider.	`ReactNode`	`"Value"`
`largeStep` Steps moved by Shift + arrow and Page Up / Page Down.	`number`	`10`
`max`	`number`	`1`
`min`	`number`	`0`
`name` Submits the value with a form under this name.	`string`	—
`onValueChange` Called on every change: while dragging, per key press, and on a typed entry.	`(value: number) => void`	—
`onValueCommit` Called when an interaction ends: pointer released, key press or typed entry.	`(value: number) => void`	—
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`step`	`number`	`0.01`
`ticks` Number of evenly spaced tick marks; 0 hides them.	`number`	`9`
`value`	`number`	—

Plus every attribute of <div> except defaultValue, onChange, children.

Accessibility

The bar is a focusable role="slider" named by its visible label, with aria-valuenow, -valuemin, -valuemax and an aria-valuetext matching the number on screen. Arrow keys step (Left/Right follow the reading direction), Shift + arrow and Page Up/Down take large steps, Home/End jump to the ends. Enter or a double-click opens a text field for an exact value (advertised with aria-keyshortcuts); Enter or blur commits, Escape cancels, and focus returns to the slider. Ticks, fill and thumb are aria-hidden. The thumb's transitions stop under reduced motion.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

decimals

Decimal places shown. Defaults to the precision of step.

number

—

defaultValue

number

—

disabled

boolean

false

editable

Allow typing an exact value (Enter or double-click).

boolean

true

formatValue

Formats the displayed value and aria-valuetext. Defaults to decimals places.

(value: number) => string

—

label

Visible label at the start of the bar. It also names the slider.

ReactNode

"Value"

largeStep

Steps moved by Shift + arrow and Page Up / Page Down.

number

10

max

number

1

min

number

0

name

Submits the value with a form under this name.

string

—

onValueChange

Called on every change: while dragging, per key press, and on a typed entry.

(value: number) => void

—

onValueCommit

Called when an interaction ends: pointer released, key press or typed entry.

(value: number) => void

—

size

"sm" | "md" | "lg"

"md"

step

number

0.01

ticks

Number of evenly spaced tick marks; 0 hides them.

number

9

value

number

—