Knob.js makes it easy to include multitouch virtual knobs in your web app.

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.

Indicator Showcase: CSS | canvas | SVG

More demos coming soon

Download the minified library and include it in your html.

	<script src="js/Knob.js"></script>

This code creates a knob that goes from zero to eleven, starting at 220 degrees and going to -40 degrees (that's 8 o'clock to 4 o'clock for people that like thinking in clockfaces).

	<script>

	var knob = new Knob(function(knob, angle, val, indicator, spriteOffset) {
		// apply knob/indicator position/angle to UI
	}, {
		angleStart: 220, // (~8 o'clock)
		angleEnd: -40,   // (~4 o'clock)
		valueMin: 0,
		valueMax: 11 // this one goes to eleven
	});

	</script>

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.