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;
--knob-grey: #fee;
Appearance
--knob-diameter: 8em;
--knob-color: maroon;
--knob-color: maroon;
--knob-diameter: 8em;
--knob-inner-diameter: 50%;
--knob-color: darkgoldenrod;
--knob-inner-diameter: 50%;
--knob-color: darkgoldenrod;
--knob-diameter: 5em;
--knob-inner-diameter: 95%;
--knob-color: black;
--knob-inner-diameter: 95%;
--knob-color: black;
Gap
data-gap="0"
data-gap="45"
data-gap="90"