Forms & Inputs

Knob

A rotary control for picking a numeric value within a fixed arc.

Install

import { Knob } from 'vael-ui'

min

max

step

size

disabled

invalid

name

import { Knob } from 'vael-ui'

<Knob :min="0" :max="100" :step="1" size="md" :disabled="false" :invalid="false" name="">Knob</Knob>

Name	Type	Default	Description
`min`	`number \| undefined`	`0`
`max`	`number \| undefined`	`100`
`step`	`number \| undefined`	`1`
`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 knob.
`ui`	`Partial<{ root: UiPartValue; dial: UiPartValue; track: UiPartValue; fill: UiPartValue; indicator: UiPartValue; }> \| undefined`
`modelValue`	`number \| undefined`	`0`

No slots.

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