Knob

<o-knob> is a rotary control you turn with the pointer, the wheel or the keyboard.

Grab the band and turn it, or drag up and down anywhere else on the knob. The track is an interactive <o-arc> with a hit-width, so it takes the pointer along its whole length, a few pixels past its edges too.

Attributes

Attribute	Default	What it does
`value`	`min`	Starting value, snapped to `step` and kept in range. It is also the default a form reset returns to; the attribute follows the knob as it turns.
`min` / `max`	`0` / `100`	The range. A `max` below `min` becomes `min`.
`step`	`1`	Increment for keys and the wheel, and the snapping grid. Decimals work; `any` turns snapping off.
`range` / `from`	`270` / auto	Arc span and start angle.
`label`		Text in the middle instead of the value. It is also the default accessible name.
`unit`		Suffix for the value. With `format="unit"`, an Intl unit.
`fill` / `track`	`#a1a1aa` / `#27272a`	Value and track colors.
`thickness`	`2.4`	Band thickness in lanes.
`shape`	`rounded`	Ending of the value arc.
`name`		Field name: with it, the knob submits its value with the form. See Forms.
`disabled`	off	Dimmed, out of the tab order and not submitted. A disabled `<fieldset>` does the same. Setting `value` from code still works.
`size`	`160px`	Width of the widget.
`glow`	off	A glow in the value color.
`format`, `decimals`, `currency`, `locale`		Number format of the readout and `aria-valuetext`, through `Intl.NumberFormat`. See Shared options.
`theme`		`dark`, `light` or `glass`. Also inherited from an `ok-theme-*` class on a container. See Shared options.

Properties and events

Name	What it does
`value`	Reads or sets the value. Setting it snaps and clamps like the attribute and fires no event, like a native input.
`min`, `max`, `step`, `stepUp()`, `stepDown()`	As on `<input type="range">`.
`form`, `labels`, `defaultValue`, `validity`	As on a native input.
`formatter`	A function that writes the readout and `aria-valuetext`. See Shared options.
`input`	Fires on every change you make: turning, keys, the wheel. `event.detail.value` has the value.
`change`	Fires once a gesture ends with a different value, and on each key press or wheel step.

knob.addEventListener('input', (e) => preview(e.detail.value))
knob.addEventListener('change', (e) => save(e.detail.value))
knob.value = 40

The knob is a form control. Inside a <form> with a name, it submits its value, resets with the form and comes back on page restore:

<form>
  <o-knob name="volume" value="30"></o-knob>
</form>

Styling

Property	Default	What it does
`--ok-fill`	`#a1a1aa`	Value arc.
`--ok-track`	`#27272a`	Track.
`--ok-focus`	`#3da9fc`	Focus ring.
`--ok-hub-color`	inherits	Color of the readout in the middle.
`--ok-hub-bg`	`none`	Background of the hole in the middle.
`--ok-hub-size`	`1.4em`	Font size of the readout.
`--ok-font-size`	`8cqmin`	Base font size, as a share of the widget. Text scales with it.

More examples

A row of knobs with readouts

Decimals and a full turn

Disabled

Accessibility

The knob is a role="slider" with aria-valuenow, aria-valuemin, aria-valuemax, aria-valuetext and aria-disabled. It is one tab stop. Arrow keys move one step, Page Up and Page Down ten, Home and End go to the ends. The wheel only turns it while it has focus, so scrolling the page never changes a value by accident.

Without a name it is called “Rotary control”, or takes its label. Give each knob an aria-label or aria-labelledby.