Knob

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<div class="tui-control">
  <tui-knob label="Treble" name="treble" min="-10" max="10" step="1" value="3" ticks="11"></tui-knob>
  <span class="tui-label">Treble</span>
  <output>3</output>
</div>

import '/kit/kit.mjs';   // defines <tui-knob>

const knob = document.querySelector('tui-knob[name="treble"]');
const out = knob.parentElement.querySelector('output');
knob.addEventListener('input', () => { out.textContent = knob.value; });
knob.addEventListener('change', () => save(knob.value));   // on release

Needs kit.css and kit.mjs. How to install the kit.

• It is a role="slider" with aria-valuemin, aria-valuemax, aria-valuenow and a aria-valuetext that includes the unit.
• Reached with Tab; every value is reachable from the keyboard, so dragging is never required.
• The wheel only turns it while it has focus, so scrolling the page never changes a setting by accident.
• Show the value in an <output> under the label; do not rely on the pointer’s angle alone.

The only custom element in the kit. kit.mjs draws the ticks as an inline SVG and builds four layers: the knurl (a repeating conic gradient), the sheen (a fixed linear gradient, bright toward the lamp), the spun cap (a conic gradient with a bow-tie highlight and fine radial rings), and the pointer. Only the knurl and the pointer rotate, by --turn; the sheen, the highlight and every shadow stay where the lamp puts them. It is form-associated through ElementInternals.