Actions

Dial

A circular drag control for picking a numeric value, like a volume knob.

Install

import { Dial } from 'vael-ui'

Playground

min

max

step

degreesPerStep

showValue

size

disabled

invalid

name

import { Dial } from 'vael-ui'

<Dial :min="0" :max="0" :step="1" :degreesPerStep="0" showValue size="md" :disabled="false" :invalid="false" name="">Dial</Dial>

Props

Name	Type	Default	Description
`min`	`number \| undefined`	`undefined`	Omit either (or both) for a genuinely unbounded value that keeps counting forever in that direction.
`max`	`number \| undefined`	`undefined`
`step`	`number \| undefined`	`1`
`degreesPerStep`	`number \| undefined`	`undefined`	Degrees of pointer rotation per `step` of value change.
`showValue`	`boolean \| undefined`	`true`
`size`	`"md" \| "sm" \| "lg"`	`"md"`
`disabled`	`boolean \| undefined`	`false`
`invalid`	`boolean \| undefined`	`false`
`name`	`string \| undefined`		Falls through to a hidden `<input>` → plain `<form>` participation.
`valueText`	`((value: number) => string) \| undefined`		Drives `aria-valuetext`, e.g. `(v) => \`${v} dB\`` for a gain dial.
`ui`	`Partial<{ root: UiPartValue; dial: UiPartValue; track: UiPartValue; fill: UiPartValue; ticks: UiPartValue; face: UiPartValue; }> \| undefined`
`modelValue`	`number \| undefined`	`0`

Slots

No slots.

Events

Name	Type	Description
`update:modelValue`	`[value: number]`

Exposed

Name	Type	Description
`el`	`HTMLElement \| null`
`dialEl`	`HTMLElement \| null`
`ticksEl`	`SVGGElement \| null`