Loading…

Range Dial

beta

A 24-hour circular two-thumb range — drag or key the start and end round a ticked clock face, with the duration in the middle.

Forms
1 file
No extra 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 range-dial

No npm packages are needed beyond what Dowel already requires.

Usage

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

app/page.tsxTSX

import { RangeDial } from "@/components/ui/range-dial";

Examples

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

Default
Gallery
Controlled
Quiet Hours
Disabled

API

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

<RangeDial>

Prop	Type	Default
`defaultValue` Uncontrolled start value. Defaults to 23:00 → 06:30 (7h30m).	`RangeDialValue`	`[23 * 60, 6 * 60 + 30]`
`density` Number of ticks round the dial, 24–96 (the source's slider stepped by 8).	`number`	`48`
`disabled`	`boolean`	`false`
`formatDuration` Formats a duration in minutes for the live announcement.	`(minutes: number) => string`	`spokenDuration`
`formatTime` Formats a time (minutes after midnight) for `aria-valuetext`.	`(minutes: number) => string`	—
`locale` Locale for the default time format.	`string`	—
`onValueChange` Called on every change: while dragging and per key press.	`(value: RangeDialValue) => void`	—
`onValueCommit` Called when an interaction ends: pointer released or key press.	`(value: RangeDialValue) => void`	—
`reach` Tick ring radius in viewBox units, 44–68. Scales the whole dial geometry.	`number`	`56`
`snap` Step in minutes for the pointer and the arrow keys.	`5 \| 15 \| 30`	`15`
`thumbLabels` Accessible names of the two thumbs.	`[start: string, end: string]`	`["Start time", "End time"]`
`value` `[start, end]` in minutes after midnight, 0–1439. The window runs clockwise.	`RangeDialValue`	—

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

Accessibility

A labelled role="group" (default "Time range") holding two focusable role="slider" thumbs ("Start time", "End time"), each with aria-valuemin 0, aria-valuemax 1439, aria-valuenow in minutes and an aria-valuetext time such as "10:30 PM" (locale-aware, overridable). Arrow keys step by the snap, Page Up/Down by an hour, Home/End jump to midnight and the last step of the day, all wrapping round midnight; up/right always add time because a clock face does not mirror. The centre readout has a spoken equivalent, and a polite live region announces the new duration only after a change. Ticks and knobs are aria-hidden; the pointer grabs the nearest thumb and moves focus to it. Tick draw-in runs through --motion-scale and is instant under reduced motion.

Quality

Measured from the source and its tests at build time.

All scores

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 — does not apply
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

defaultValue

Uncontrolled start value. Defaults to 23:00 → 06:30 (7h30m).

RangeDialValue

[23 * 60, 6 * 60 + 30]

density

Number of ticks round the dial, 24–96 (the source's slider stepped by 8).

number

48

disabled

boolean

false

formatDuration

Formats a duration in minutes for the live announcement.

(minutes: number) => string

spokenDuration

formatTime

Formats a time (minutes after midnight) for aria-valuetext.

(minutes: number) => string

—

locale

Locale for the default time format.

string

—

onValueChange

Called on every change: while dragging and per key press.

(value: RangeDialValue) => void

—

onValueCommit

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

(value: RangeDialValue) => void

—

reach

Tick ring radius in viewBox units, 44–68. Scales the whole dial geometry.

number

56

snap

Step in minutes for the pointer and the arrow keys.

5 | 15 | 30

15

thumbLabels

Accessible names of the two thumbs.

[start: string, end: string]

["Start time", "End time"]

value

[start, end] in minutes after midnight, 0–1439. The window runs clockwise.

RangeDialValue

—