russell mcclellan

russell.mcclellan@gmail.com

knob.js

For the last few years, whenever I've needed some browser-based knobs, I've used Anothy Terrien's excellent jQuery Knob plug-in. However, despite the high quality of that library, the situation has always made me feel a bit uncomfortable.

I've never really liked the idea of bundling components like this as jQuery plug-ins, since there is no fundamental reason that a widget should need to be tied to a specific DOM-manipulation library. jQuery's bizarre API, muddled concepts, overcomplicated semantics, and totally unique aesthetic sense have always bothered me, and as browsers get more and more compatible, it has become totally viable to ditch jQuery entirely. The one thing that many of my projects still need from jQuery ecosystem is the various UI widgets that have for some reason been forever tied to the jQuery library.

This project is an attempt to show that distributing widgets without jQuery doesn't have to be painful.

technical details

The project uses google's polymer platform to polyfill some web component features. For now, it requires some non-semantic markup (i.e. the <x-knobjs-knob> tag is presentational and not semantic), but that will change once browsers start supporting the shadow DOM in earnest. In the future, I'm hoping knob.js can simply become an alternate shadow-dom for the <input type='range'> element.

more info

Documentation, along with code under a permissive license, is available on GitHub

All images and text are licensed under a Creative Commons Attribution 3.0 United States License, except as noted. Linked code, and embedded code examples are licensed separately.