Beautiful jQuery Knob Controls for your App

jquery knob input controls

jquery knob input controls

jQuery-Knob is a javascript plugin for jQuery created by Anthony Terrien.  It allows you to add knob-like controls to your web-apps, similar to those found in audio mixing software, or DAWs.  Interact with them by click-dragging on the loop in a radial motion.  You can intuitively adjust the knob with finer-grained control by dragging further away from the center, around a larger circumference. Or click on the numerical value in the center to select an exact value by keypad.

The controls are rendered using the HTML5 <canvas> element, but you add them to your design using the sensible <input> element, just as you’d employ a typical form control.  By adjusting a number of custom attributes of this input element, you can style your knob control in a variety of sleek designs.

I far prefer these minimalist, concentric-circle constructed, designs to the alternative faux hardware knob style, as they reflect a true digital user interface idiom.  The controls really shine on a touch interface, such as a smartphone or iPad, where the knob input is feels very tactile and natural.  I can see them being very useful in the development of the “native” HTML5 apps for Android or iPhone mobile devices, either audio apps or other UI-focused apps requiring regular adjustments of “slider” variables.

Here is a demo of the jQuery-Knob plugin, featuring various styling choices, and the code can be downloaded or forked on Github.

Leave a Reply

CommentLuv badge