codepens/knob-input-component

Knob Input Component

_A Pen created at CodePen.io. Original URL: https://codepen.io/jhnsnc/pen/KXYayG.

New demo showing the same result with less code using the precision-inputs library: https://codepen.io/jhnsnc/pen/mqPGQK

A simple demo showcasing my new KnobInput input component. It is written in vanilla JS and designed to be highly customizable.

The class uses a "range" input behind the scenes so it remains accessible to screenreaders while functioning like knob controls from music production software. This means that it allows for precise input via keyboard, touch, mouse, and mousewheel without sacrificing visual fidelity, portability, or accessibility.

I decided to publish the component on npm: https://www.npmjs.com/package/precision-inputs

Feel free to give me feedback here or on Github: https://github.com/jhnsnc/precision-inputs