Knob demo

Knob 1.1 is a JavaScript widget that changes a HTML-input of type "number" into a rotary control (dial), which can be manipulated by the mouse or touch device.

Knob 1.1 should work in any modern browser. It is small code, less than 3kB in size.

(default)
data-knob="ccw"
data-knob="flip"

Other ranges

min="200" max="500"
min="-50" max="50"
min="100" max="0"

Colors

--knob-color: blue;
--knob-color: oklch(0.68 0.09 204);
--knob-color: #f00;
--knob-grey: #fee;

Appearance

--knob-diameter: 8em;
--knob-color: maroon;
--knob-diameter: 8em;
--knob-inner-diameter: 50%;
--knob-color: darkgoldenrod;
--knob-diameter: 5em;
--knob-inner-diameter: 95%;
--knob-color: black;

Gap

data-gap="0"
data-gap="45"
data-gap="90"