Loading…

Drag Stepper

beta

A pill number stepper: tap − or + to step, or hold either one to stretch into a sweep and drag to scrub.

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 drag-stepper

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 { DragStepper } from "@/components/ui/drag-stepper";

Examples

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

Default
Gallery
With Units
Disabled

API

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

<DragStepper>

Prop	Type	Default
`decrementLabel` Accessible name of the − button.	`string`	`"Decrease"`
`defaultValue` Initial value when uncontrolled.	`number`	`24`
`disabled`	`boolean`	`false`
`fill`	`"light" \| "dark"`	`"light"`
`formatValue` Spoken value (`aria-valuetext`), for units: `(v) => \`${v} guests\``.	`(value: number) => string`	—
`holdDelay` Milliseconds a side button must be held to enter sweep mode.	`number`	`250`
`incrementLabel` Accessible name of the + button.	`string`	`"Increase"`
`largeStep` Steps moved by Page Up / Page Down (multiplied by `step`).	`number`	`10`
`max`	`number`	`100`
`min`	`number`	`0`
`name` Submits the value with a form under this name.	`string`	—
`onValueChange` Called on every change: tap, key, typed entry and each sweep move.	`(value: number) => void`	—
`sensitivity` Units scrubbed per pixel of horizontal drag in sweep mode.	`number`	`0.6`
`step`	`number`	`1`
`stroke` A 1px inset hairline ring around the pill.	`boolean`	`false`
`value` Controlled value.	`number`	—

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

Accessibility

The value is a text input with role="spinbutton", aria-valuenow, -valuemin, -valuemax and an optional aria-valuetext from formatValue. Up/Right step up and Down/Left step down (Left/Right mirror in right-to-left layouts, and leave the caret alone while a number is being typed), Page Up/Down take large steps, Home/End jump to the bounds. Typing commits on Enter or blur, clamped to the range; Escape discards the draft. The − and + side buttons are real, named buttons ("Decrease", "Increase") that step on click, so Enter and Space work; they report aria-disabled at the bounds but stay focusable. Holding one to sweep is a pointer convenience with no keyboard-only behaviour behind it. The fill is aria-hidden, and the sweep's stretch and swell are CSS transitions that stop under reduced motion. A development warning fires when the value is unnamed.

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

decrementLabel

Accessible name of the − button.

string

"Decrease"

defaultValue

Initial value when uncontrolled.

number

24

disabled

boolean

false

fill

"light" | "dark"

"light"

formatValue

Spoken value (aria-valuetext), for units: (v) => \${v} guests\``.

(value: number) => string

—

holdDelay

Milliseconds a side button must be held to enter sweep mode.

number

250

incrementLabel

Accessible name of the + button.

string

"Increase"

largeStep

Steps moved by Page Up / Page Down (multiplied by step).

number

10

max

number

100

min

number

0

name

Submits the value with a form under this name.

string

—

onValueChange

Called on every change: tap, key, typed entry and each sweep move.

(value: number) => void

—

sensitivity

Units scrubbed per pixel of horizontal drag in sweep mode.

number

0.6

step

number

1

stroke

A 1px inset hairline ring around the pill.

boolean

false

value

Controlled value.

number

—