Comet Dial

Circular dial you turn by dragging around the ring, with a comet trail that stretches behind the bead by how fast it moves and a flick that carries on with momentum.

Default

Tap the ring to jump, or drag around it. Flick to throw the bead and watch the comet stretch.

Customize

Accent

Ink

Value62

Unit

Size250px

Sweep320°

Thickness5

Speed25

Tap Bounce0.2

Flick Bounce0.1

Momentum1

Comet Reach180°

Comet Width12

Disabled

API Reference

CometDial

Prop	Type	Default	Description
`value`	`number`	`undefined`	Controlled value, bound with v-model:value. A change from outside launches the reading on the tap spring.
`defaultValue`	`number`	`62`	Initial value when uncontrolled.
`min`	`number`	`0`	Lowest value.
`max`	`number`	`100`	Highest value.
`step`	`number`	`1`	Snapping grid, and the keyboard nudge.
`unit`	`string`	`'%'`	Suffix after the figure. Empty hides it.
`label`	`string`	`'Level'`	Accessible name of the slider.
`accent`	`string`	`'#f5f5f5'`	The lit arc, the bead and the comet.
`ink`	`string`	`'#fdfdfd'`	The track and the readout.
`size`	`number`	`250`	Diameter in pixels. Everything inside scales with it.
`sweep`	`number`	`320`	Degrees the arc covers, with the gap centred at the bottom.
`thickness`	`number`	`5`	Stroke width of the track and the arc. The bead follows it.
`speed`	`number`	`25`	How quickly the reading arrives, 0 to 100.
`tapBounce`	`number`	`0.2`	Ring-down after a tap. 0 stops dead.
`flickBounce`	`number`	`0.1`	Ring-down after a full-speed flick. A slower release lands between the two.
`momentum`	`number`	`1`	How far a flick carries the reading past where you let go. 0 drops it where released.
`cometReach`	`number`	`180`	Degrees of trail behind the bead at full speed.
`cometWidth`	`number`	`12`	Extra stroke width at the head of the trail at full speed.
`disabled`	`boolean`	`false`	Dims the dial and ignores input.

Event	Description
`change`	Emitted on every snapped change, including during a drag.
`change-end`	Emitted on release and on a key, with the value and a detail object holding the release velocity and the bounce it earned.
`update:value`	Emitted alongside change, for v-model:value.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Arrow Right` + `Arrow Up`	Raises the value by one step. Shift multiplies it by ten.
`Arrow Left` + `Arrow Down`	Lowers the value by one step. Shift multiplies it by ten.
`Page Up` + `Page Down`	Moves by ten steps.
`Home` + `End`	Jumps to the minimum or the maximum.

The ring is a slider with aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext including the unit.
With prefers-reduced-motion the reading jumps and the comet trail stays off.

Code Slots Dodge Field