jQuery Enhanced Switch Control With Custom Styles

How to make use of it:

1. Load the primary script jquery.enhanced-switch.js after loading the jQuery JavaScript library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/jquery.enhanced-switch.js"></script>

2. Load a theme CSS of your selection within the doc.

<link rel="stylesheet" href="css/jquery.enhanced-switch-apple.css">
<link rel="stylesheet" href="css/jquery.enhanced-switch-circle.css">
<link rel="stylesheet" href="css/jquery.enhanced-switch-<a href=" #!"="">metro.css" />
<link rel="stylesheet" href="css/jquery.enhanced-switch-metro-alt.css">
<link rel="stylesheet" href="css/jquery.enhanced-switch-pingpong.css">

3. Or create a brand new theme following the instructions.

.es-switch-bg {
  /* Set the width and height of the switch background */
  width: ;
  height: ;
  
  /* Set the border-radius of the swtch background - for round switch, make border-radius half the height of the switch and ceil that value (i.e border-radius = math.ceil(height / 2)) */
  border-radius: ;
  
  -webkit-transition: background-color 0.1s ease-in-out;
  -moz-transition: background-color 0.1s ease-in-out;
  -o-transition: background-color 0.1s ease-in-out;
  transition: background-color 0.1s ease-in-out;
}

.es-switch-bg[data-state="false"] {
  /* The colour of the switch when set to false */
  background-color: #;
}

.es-switch-bg[data-state="true"] {
  /* The colour of the switch when set to true */
  background-color: #;
}

.es-toggle {
  /* The dimensions of the switch
     Height should be set using the following formula:
         height = .es-switch-bg.height - 2 * top 
     Set the width to the same value to get an equal sized switch */
  height: ;
  width: ;
  
  position: relative;
  
  /* Set how far the toggle should be from the top of the switch background. */
  top: ;
  
  /* Set the border-radius of the switch.  Set it to 100% to get a round switch */
  border-radius: ;
  
  /* Set the background color of the toggle */
  background-color: #;
  
  -webkit-transition: left 0.1s ease-in-out;
  -moz-transition: left 0.1s ease-in-out;
  -o-transition: left 0.1s ease-in-out;
  transition: left 0.1s ease-in-out;
}

.es-switch-bg[data-state="false"] .es-toggle {
  /* How far the switch should be from the left side of the switch background when set to false.  This should preferably be the same as the 'top' value you set in .es-toggle */
  left: ;
}

.es-switch-bg[data-state="true"] .es-toggle {
  /* How far the switch should be from the left when the switch is set to true.
     A suggested formula to use:
         left = .es-switch-bg.width - .es-toggle.width - .es-switch-bg[data-state="false"].es-toggle.left */
  left: ;
}

4. Create a container to hold the change management.

<div class="switch"></div>

5. Initialize the plugin to render the change management on the web page.

$(".switch").enhancedSwitch();

6. Get the current on/off state.

$(".switch").click(function() {
  var selectedSwitch = $(this);
  selectedSwitch.enhancedSwitch('toggle'); 
  console.log(selectedSwitch.enhancedSwitch('state'));
});

7. Turn this change management on or off programmatically:

$(".switch").enhancedSwitch('setTrue'); 
$(".switch").enhancedSwitch('setFalse'); 
$(".switch").enhancedSwitch('toggle');

Switch Control With Custom Styles, Custom Styling Form Inputs With Modern CSS, Toggle Switch Class jQuery, Switch Control Demo

See Demo And Download