Fork me on GitHub

Knobject.js Tutorial

Knobject.js allows you create knob components that work similarly to the HTML range input. It allows you to define independent custom functions for both left and right turns. You can also define the value which the knob is turned to when the page loads which moves the position. Knobs come in two modes, 'normal' and 'centered'. The default orientation of the knobs, 'normal' treat the min value as the default value, which the knob is twisted all the way to the bottom-left. The other orientation of the knobs, 'centered', treats 'defaultValue' as the default/centered value; it also allows for a function that happens when the knob is centered. Alt(Windows)/Option(Mac)-clicking resets the knob to its default value.

Parameter Type Default Value Description
color String 'rgb(126,38,36)' the color of the knob
defaultValue Number mean of min and max this is the value the knob when centered (for orientation: 'centered' only)
diameter Number 50 the height and width of the knob
knobContainer String 'knobContainer' the id of the container for the knob
knobId String 'knob' the id of the knob
markerColor String 'black' the color of line indicator in the middle of the knob
max Number 100 the maximum 'value' of the knob
min Number 0 the minimum 'value' of the knob
orientation String 'normal' dictates the default position; bottom-left ('normal') or upright ('centered')
onLeftTurn Function 'console.log(value)' the function called when the knob is turned to the left
onReset Function 'console.log(value)' the function called when the knob is reset; alt/option-clicking to reset knob
onRightTurn Function 'console.log(value)' the function called when the knob is turned to the right
value Number min the numerical output of the knob; indicates how far the knob is turned
xAxis Boolean true controls which axis the mouse uses to control the knob

A Knob with 'normal' orientation:

<body>
<div id="knobContainer1"></div>
<div id="value1">0</div>

<script>
var parameters1 = {
  containerId: 'knobContainer1',
  knobId: 'knob1',
  orientation: 'normal',
  max: 100,
  min: 0,
  xAxis: true,
  onLeftTurn: function(value) {
    document.getElementById('value1').innerHTML = value;
  },
  onRightTurn: function() {
    document.getElementById('value1').innerHTML = value;
  }
var knob1 = new Knob(parameters1);
</script>
</body>


This knob goes from 0-100, and our left and right functions both output the knob's 'value' to the value div below:


A Knob with 'centered' orientation:

<body>
<div id="knobContainer2"></div>
<div id="value2">0</div>

<script>
var parameters2 = {
  containerId: 'knobContainer2',
  knobId: 'knob2',
  orientation: 'centered',
  max: 100,
  min: -100,
  xAxis: false,
  onLeftTurn: function(value) {
    document.getElementById('value2').innerHTML = value;
  },
  onRightTurn: function() {
    document.getElementById('value2').innerHTML = value;
  },
  onReset: function() {
    document.getElementById('value2').innerHTML = value;
  }
var knob2 = new Knob(parameters2);
</script>
</body>


This knob goes from -100 to 100, and our defaultValue is 0. This time, our xAxis property is set to false, which means to control the knob, we now have to move the mouse up or down instead of left or right. Our left, right, and reset functions all output the knob's 'value' to the value div below:


Example #3

Example #4

Example #5