Nice Touch-enabled jQuery Knob Plugin - Knobby.js
File Size: | 9.54 KB |
---|---|
Views Total: | 2616 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.