Tick Progress
betaA percentage drawn as a row of waveform ticks under a big figure — a progress bar, or a slider with hover preview.
- Data
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add tick-progressnpm packages installed: class-variance-authority.
import { TickProgress } from "@/components/ui/tick-progress";Default
Gallery
Display
<TickProgress>
| Prop | Type | Default |
|---|---|---|
defaultValueInitial value when uncontrolled. | number | 0 |
disabled | boolean | false |
heightsTick heights in percent, one per tick. Defaults to a gentle waveform. | number[] | — |
hideValueHide the big figure. | boolean | false |
interactiveA slider you can hover, click and key through, rather than a progress bar. | boolean | false |
onValueChangeCalled when a value is committed (click or key). | (value: number) => void | — |
stroke | boolean | — |
ticksNumber of ticks. The value snaps to them. | number | 34 |
valueControlled value, 0–100. | number | — |
Plus every attribute of <div> except defaultValue, onChange.
Display mode is a role="progressbar" with aria-valuenow and a "%" value text. `interactive` makes it a role="slider": focusable, with a focus ring; arrows step one tick (mirrored in right-to-left layouts), PageUp/PageDown five, Home/End the ends, and keys commit immediately as the APG slider pattern requires. Hover preview and click-to-commit are pointer conveniences over that. The ticks and the figure are aria-hidden because the role already carries the value; name it with aria-label or aria-labelledby.
9/9
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 — does not apply
- No fixed widths — passes