Knob.js makes it easy to include multitouch virtual knobs in your web app.
For demos and the story behind Knob.js, check out 🎛 How Apple Designs a Virtual Knob
Knob.js does the heavy lifting for things like:
- Minimum/maximum angle & value constraints.
- Figuring out the position and angle of the indicator dot.
- Doing the math for displaying custom rendered knobs using image sprites.
Knob.js is a purely logical component - rather than drawing or moving things around, it only crunches the numbers and gives back positions and angles. This means that you can render your virtual knobs using CSS, <canvas>, <svg>, or however you like.
Knob.js recognizes spinning and sliding gestures. Spin the knob and it follows your finger. Start sliding up/down or left/right and it locks into the direction and acts like a slider. Mouse interaction including scrolling is also supported.
The easiest way to get started is to check out the various demos here
More demos in the post 🎛 How Apple Designs a Virtual Knob
Knob.js wouldn't be here without Apple's Garageband for iOS. The designers/developers really put a lot of thought into the way a virtual knob should work. Thanks.
The layout of the javascript was heavily influenced by Zynga's Scroller.