is a jquery plugin to convert number input elements into turnable knobs that can be adjusted by cyclic dragging with mouse or fingers - multi-touch is now supported! (DEPRECATED: behaviour and code is a bit wonky, should probably not use fantasy html attributes but data- attributes)
You'll find the demo files in the demo/ directory of the repository.
Load the Javascript file by including the script after jQuery has been included:
<script src="jquery.knobby.js"></script>
Also import the stylesheet:.
<link rel="stylesheet" href="jquery.knobby.light.css">
The appearance of the plugin is fully customizable through CSS – you can add a background of your choice or generate a noise background for example. The stylesheets are intended as starting points rather than final states.
You need to have an input like the following
<input type="number" name="input_name" min="0" max="10" value="5" />
To convert all inputs with a type of number on a page to knobby-knobs use:
$("input[type=number]").knobby();
You can pass options to configure knobby - the numbers given are the default values:
$(".high-pass").knobby({
min:0,
max:100,
turn:1,
step:1,
size:4,
handleSize:1,
handleGap:.25
});
The following options can be served as attributes or passed as options - if both is present attribute wins.
| attribute | description | type |
|---|---|---|
| min | minimum knob value – must be smaller than the max-value | float |
| max | maximum knob value – must be larger than the min-value | float |
| step | the minimun change of the value; there should be an normal number of steps between min and max ((max-min)/step should result in an integer number) |
float |
| turn | number of full circles from min to max | float |
| size | radius of the knob in em (relative to font-size) of .knobby-knob |
float |
| handleSize | diameter of the handle in em | float |
| handleGap | gap between the outer border of the knob and the handle in em | float |