mcanthony / khantrol-knob

UI control knob, jQuery plugin

khantrol-knob

##Installation installing khantrol knob is really simple just include the required JS and CSS files in your document:

<script type="text/javascript" src="khantrol-knob.min.js"></script>
<link rel="stylesheet" href="khantrol-knob.css" />

##Basic Usage to use the knob with default settings first of all create an text input element:

<input type="text" id="khantrol-knob" />

then call the plugin in javascript:

$("#khantrol-knob").khantrolKnob();

to get the value use .val() on the original element:

$("#khantrol-knob").val()

###Tracking Changes to track any changes add an event listener to the original element:

$("#khantrol-knob").change(function(){
	console.log($(this).val());
});

events are also fired when the knob is turned to the minimun and maximum values, these can be tracked like so:

$("#khantrol-knob").on("max", function(){
	console.log("turned to max");
});
$("#khantrol-knob").on("min", function(){
	console.log("turned to min");
});

##Control Khantrol knob comes setup to work perfectly with the mouse and touch events, extra control can be added with the keyboard, when a holdKey or groupKey is definied the user can hold this key down and use the up and down keys on their keyboard to control the value of the knob. In this example the H key (keycode 72) is used as the holdKey:

$("#khantrolKnob").khantrolKnob({
	holdKey: 72
});

groupKey is made to be used across multiple knobs allowing you to control their values at the same time. In this example the G key is used as the groupKey:

$("#khantrolAlpha").khantrolKnob({
	groupKey: 71
});
$("#khantrolBravo").khantrolKnob({
	groupKey: 71
});
$("#khantrolCharlie").khantrolKnob({
	groupKey: 71
});

a full list of javascript keycodes can be found here.

##Styling khantrol knob comes with a default set of styles that work out of the box. If you want to custom style the knob you can simply give a value to css to create a custom class:

$("#khantrol-knob").khantrolKnob({
	css: "my-class";
})

this class will automatically be prefixed with "kk-" giving the class name .kk-my-class. To ensure the knob works correctly a width and height must be defined for .kk-face:

.kk-my-class .kk-face{
	width: 2em;
	height: 2em;
}

If you want a headstart some basic styles are supplied to ensure the knob functions as desired while allowing you to extend the styles, to access them use skeleton:

$("#khantrol-knob").khantrolKnob({
	css: "skeleton";
})

##Options

• css (string) - allows a custom class to be passed to the wrapper with prefix ".kk-" for use with skins and custom styling default: "default"
• responsive (bool) - used to create fluid with wrappers default: false
• range (int) - range of degrees the knob will rotate default: 270
• minVal (int) - minimum value the knob will give default: 0
• maxVal (int) - maximum value the knob will give default: 100
• speed (int) - speed at which the knob can be rotated default: 1
• scale (int) - scale at which numbers increase and decrease (10, 1, 0.1 etc) default: 1
• holdKey (int) - keycode to control the knob with, must be unique default: null
• groupKey (int) - keycode to control the group, does not need to be unique default: null

#Examples

for examples please visit the Khantrol Knob Site