Knob Style Rotary Switch Plugin with jQuery - rotarySwitch

File Size: 456 KB
Views Total: 6809
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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="//"></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.


5. All customization options with default values.


  // 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.