jQuery Plugin For Tri-state Toggle Switches - Candlestick

File Size: 40.2 KB
Views Total: 21587
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Tri-state Toggle Switches - Candlestick

Candlestick is a jQuery plugin that converts a normal checkbox into a stylish, touch-enabled on/off toggle switch with three check states: checked, unchecked and indeterminate.

How to use it:

1. Put the required CSS in the head section of your HTML document.

<link href="dist/candlestick.min.css" rel="stylesheet">

2. Create a normal checkbox input.

<input type="checkbox" name="test" value="" id="test">

3. Put jQuery library and the jQuery Candlestick plugin's script at the end of the document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/candlestick.min.js"></script>

4. Include the hammer.js && jQuery hammer.js plugin for touch gestures support.

<script src="hammer.min.js"></script>
<script src="jquery.hammer.js"></script>

5. Call the function to generate a default toggle switch.


6. Default options and callbacks.


  // options or contents
  'mode': 'options',

  'contents': {
      'left': 'Left',
      'middle': 'Middle',
      'right': 'Right',
      'swipe': false

  // for on value
  'on': '1',

  // for off value
  'off': '0',

  // for non value
  'default': '',

  // enable touch swipe
  // requires hammer.js and jquery hammer.js plugin
  'swipe': true,

  // lg, md (default), sm, xs
  'size': 'md',

  // for none/default value
  'nc': '',

  // Enable the three options, set to false will disable the default option
  'allowManualDefault': true,

  // callbacks
  afterAction: function() {},
  afterRendering: function() {},
  afterOrganization: function() {},
  afterSetting: function() {}

7. Reset the option.


Change log:


  • Version 1.4.1 fixed afterAction parameters return undefined


  • Version 1.4 with allowManualDefault config


  • Bug fix, jQuery.noConflict() works now


  • Bug fix, default settings was in conflict with options mode. eg: candlestick('reset'). Rename in 'nc' name
  • Store Candlestick settings for options use
  • Optimizing code
  • CleanUp code


  • Declared an internal variable "d" to prevent ReferenceError


  • bugfix


  • add a new mode called "options"
  • add swipe event to this mode


  • Add reset option


  • Add swipe option performed by hammerjs

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