Switchery Js

Switchery js is beautiful component which turns your default html checkbox to beautiful checkbox. To use switchery chekbox in your project follow these two steps given below :

1. you have to select HTML checkbox using vanilla js

Like: document.querySelectorAll('.js-switch');

2. Initiate Switchery Class and pass selected html elem on it.

Like: new Switchery(elem);

Some Importants Facts :

Events: To Catch events like onchange, click etc, You can use all the events listener that you using in default HTML checkbox.

Like: var clickButton = document.querySelector('.js-switch'); // switchery chekbox

clickButton.addEventListener('click', function() {
  // do you stuffs here
});

Styles:

• color : color of the switch element (HEX or RGB value)
• secondaryColor : secondary color for the background color and border, when the switch is off
• jackColor : default color of the jack/handle element
• jackSecondaryColor : color of unchecked jack/handle element
• className : class name for the switch element (by default styled in switchery.css)
• disabled : enable or disable click events and changing the state of the switch (boolean value)
• disabledOpacity : opacity of the switch when disabled is true (0 to 1)
• speed : length of time that the transition will take, ex. '0.4s', '1s', '2.2s' (Note: transition speed of the handle is twice shorter)
• size : size of the switch element (small or large)

To use custome style wrap these property inside of object and passed it in switchery object as second parameter,

Like defaults = {
    color             : 'green'
  , secondaryColor    : 'red'
  , jackColor         : '#fff'
  , jackSecondaryColor: null
  , className         : 'switchery'
  , disabled          : false
  , disabledOpacity   : 0.5
  , speed             : '0.1s'
  , size              : 'mediaum'
}

new Switchery(elem,defaults);