Custom On/Off Toggle Switch Plugin For jQuery - on-off-switch.js

File Size: 39.9 KB
Views Total: 44132
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Custom On/Off Toggle Switch Plugin For jQuery - on-off-switch.js

on-off-switch.js is a simple to use jQuery plugin used for generating toggle switches with custom text, colors and sizes form 'hidden' or checkbox inputs.

How to use it:

1. Load jQuery JavaScript library and the jQuery on-off-switch.js plugin's files into the webpage.

<script src="//"></script>
<script src="on-off-switch.js"></script>
<script src="on-off-switch-onload.js"></script>
<link rel="stylesheet" href="css/on-off-switch.css">

2. Create a basic on / off toggle switch from <input type="checkbox">.

<input type="checkbox" id="on-off-switch" name="switch1" checked>
new DG.OnOffSwitch({
    el: '#on-off-switch',
    textOn: 'On',
    textOff: 'Off',

3. Create a toggle switch without text and by using <input type="hidden"> instead of <input type="checkbox">. Value="1" for checked, 0 for unchecked.

<input type="hidden" id="on-off-switch-notext" value="0">
new DG.OnOffSwitch({
    el: '#on-off-switch-notext'

4. Create a toggle switch with custom color and size

<input type="hidden" id="on-off-switch-custom" value="1">
new DG.OnOffSwitch({
    el: '#on-off-switch-custom',
    height: 150,

5. Listen to native checkbox updates.

<input type="checkbox" name="on-off-switch-demo" class="custom-switch" id="on-off-switch-demo">
<a href="#" onclick="$('#on-off-switch-demo').click();return false">Execute $('#on-off-switchdemo').click()</a>
new DG.OnOffSwitchAuto({
    listener:function(name, checked){
      document.getElementById("ELEMENT").innerHTML = "Switch " + name + " changed value to " + checked;

6. All default options.

new DG.OnOffSwitchAuto({

    inputEl: undefined,

    listener: undefined,
    trackBorderColor: undefined,

    checked: false,

    width: 0,
    height: 30,

    trackBorderWidth: 1,

    textSizeRatio: 0.40,

    trackColorOn: undefined,
    trackColorOff: '#EEE',

    textColorOn: undefined,
    textColorOff: undefined,

    el: undefined,
    track: undefined,
    thumb: undefined,
    thumbColor: undefined,
    onTextEl: undefined,
    offTextEl: undefined,
    onOffTrackContainer: undefined,

    textOn: "",
    textOff: "",

    minX: 0,
    maxX: 0,

    trackOn: undefined,
    trackOff: undefined,

    innerTrackWidth: 0,

    name: undefined,

    dragCurrentX: 0,
    borderSize: 0,


7. API methods.

  • toggle: Toggles the checked state of the switch. 
  • check: Set the switch to checked. 
  • uncheck: Set the switch to unchecked. 
  • getValue: Returns true when checked, false otherwise.

Change log:


  • Fixed issue with scrolling
  • Fixed drag event

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