Switchery Js

449   06 October 2019

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);
View More

Related Elements