Nice Touch-enabled jQuery Knob Plugin - Knobby.js

Knobby.js is a jQuery plugin that turns a number input into a nice clean knob control with support for mouse drag and touch events.

How to use it:

1. Load a CSS theme of your choice into the head section.

<link rel="stylesheet" href="jquery.knobby.light.css">
<!-- OR -->
<link rel="stylesheet" href="jquery.knobby.dark.css">

2. Load the jQuery Knobby.js script after jQuery JavaScript library.

<script src="jquery.js"></script>
<script src="jquery.knobby.js"></script>

3. Create a number input field on your webpage.

<input type="number" name="demo" 
       turn="3" 
       value="0" 
       min="0" 
       max="1000" 
       step="25"
>

4. Initialize the plugin to generate a light themed knob.

$("input[type=number]").knobby();

5. You can also pass the options during initialization.

$("input[type=number]").knobby({

  // number of full circles from min to max
  turn:1,

  // minimum knob value
  min:0,

  // maximum knob value
  max:100,

  // the minimun change of the value
  step:1,

  // radius of the knob in em
  size:4,

  // diameter of the handle in em
  handleSize:1,

  // gap between the outer border of the knob and the handle
  handleGap:.25,
  
});

Changelog:

2020-10-03

• update and cleanup

2015-05-14

• multi-touch update, style performance improved

2015-05-12

• added size and handle options

---

This awesome jQuery plugin is developed by grilly86. For more Advanced Usages, please check the demo page or visit the official website.