Knob Style Rotary Switch Plugin with jQuery - rotarySwitch

rotarySwitch is a jQuery plugin that converts the default text input into a flexible, knob-style Rotary Switch for multiple purpose. Licensed under the Apache License 2.0.

Features:

• Custom themes.
• Easy to use.
• Fully customizable via JavaScript and CSS.

How to use it:

1. Load jQuery library before you load the jQuery rotarySwitch plugin.

<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="jquery.rotaryswitch.js"></script>

2. Load the stylesheet jquery.rotaryswitch.css in the head section of your html document. You can override or modify the CSS rules to create your own styles.

<link href="jquery.rotaryswitch.css" rel="stylesheet">

3. Create a regular text field for the plugin.

<input type="text" class="rotarySwitch" value="0">

4. Render a default Rotary Switch on your html page.

$('.rotarySwitch').rotaryswitch();

5. All customization options with default values.

$('.rotarySwitch').rotaryswitch({

  // Minimal value
  minimum: 0, 

  // Maximum value
  maximum: 12, 

  // Step size
  step: 1, 

  // Snap to steps in motion
  snapInMotion: true, 

  // Start point in deg
  beginDeg: 0, 

  // Length in deg
  lengthDeg: 360, 

  // // Which value will used, if the the start and the end point at the same deg.
  minimumOverMaximum: true, 

  // Show input element
  showInput: false, 

  // Show deg marks
  showMarks: false, 

  // Theme class
  themeClass: 'defaultTheme' 
  
});

6. Event.

var demo = $('.rotarySwitch').rotaryswitch();

demo.on('change', function() {
  // do something
});

---

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