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="//code.jquery.com/jquery-1.12.2.min.js"></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,
    trackColorOn:'#F57C00',
    trackColorOff:'#666',
    trackBorderColor:'#555',
    textColorOff:'#fff',
    textOn:'YES',
    textOff:'NO'
});

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({
    cls:'.custom-switch',
    textOn:"YES",
    textOff:"NO",
    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,
    isCheckbox:false,

});

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:

2016-08-09

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