Minimalist Knob Control With jQuery And CSS3 - jsRapKnob

jsRapKnob is an extremely lightweight jQuery plugin that makes uses of JavaScript and CSS3 transforms to create turnable knobs for volume, speed, fuel, RPM, etc.

The knobs can be changed with mouse move, mouse drag, mouse click, or touch tap. Easy to customize the appearance in the CSS.

How to use it:

1. Insert the jQuery jsRapKnob plugin's JavaScript and CSS into the HTML document.

<link rel="stylesheet" href="jsRapKnob.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="jsRapKnob.js"></script>

2. Call the function jsRapKnob to generate a default knob control inside a specified container.

<div id="example" ></div>

$(function(){

  $('#example').jsRapKnob();

});

3. Add a caption to the knob control.

$('#example').jsRapKnob({
  caption: 'Volumn'
});

4. Set the initial value.

$('#example').jsRapKnob({
  position: 0.6
});

5. Execute a function when the value changes.

$('#example').jsRapKnob({
  onChange:function(value){
    $('.rapKnobCaption',this).text('Volume ' + Math.floor(value * 100) + '%');
  }
});

6. Execute a function after you click the knob control.

$('#example').jsRapKnob({
  onMouseUp:function(value){
    alert(value);
  }
});

---

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