Convert Number Inputs Into Knobs Adjusted By Dragging With Mouse | jquery-knobby

How to make use of it:

1. Load a CSS theme of your selection into the top part.

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

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

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

3. Create a quantity 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 lightweight themed knob.

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

5. You can even go the choices throughout 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,
  
});

Nice Touch-enabled jQuery Knob Plugin, jquery knobby Plugin/Github

See Demo And Download