Minimal Material Design Toggle Switch

Preview:

Description:

This is a Material Design inspired toggle switch created from normal checkbox input. Written in CSS and a little JavaScript.

How to use it:

The html structure for the toggle switch.

<input type="checkbox" class="slide-toggle" id="toggleDemo">
<label for="toggleTwo" class="styled-box norm">
  <span class="toggle-demo">
    <span class="toggle-selector"><span class="blip"></span></span>
  </span>
  Click Me
</label>

The core CSS styles for the toggle switch.

*:focus {
  outline: none !important;
  border-color: none;
  box-shadow: none;
}
.slide-toggle {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.slide-toggle + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  cursor: pointer;
}
.slide-toggle:hover + label:before { background: lightgray; }
.slide-toggle:focus + label:before { background: initial; }
.slide-toggle:checked + label:before { background: initial; }
.blip, .r-blip {
  height: 10px;
  width: 10px;
  z-index: 100;
  position: absolute;
  border-radius: 50%;
  top: 7px;
  left: 5px;
  background: rgba(0, 150, 255, 0.5);
  transform: scale(0);
}
.blip.blipped, .r-blip.blipped { animation: blipp 500ms ease; }
 @keyframes 
blipp {  to {
 transform: scale(5);
 opacity: .3;
}
}
.toggle {
  height: 22px;
  width: 22px;
  z-index: 100;
  position: absolute;
  border-radius: 50%;
  top: -2px;
  left: -2px;
  background: #0096ff;
}
.toggle.checked { left: 18px; }
.toggle-selector {
  height: 22px;
  width: 22px;
  z-index: 100;
  position: absolute;
  border-radius: 50%;
  top: -2px;
  left: -2px;
  background-color: gray;
  cursor: pointer;
  transition: all 300ms ease;
}
.toggle-selector.sel-inner {
  left: 20px;
  transition: all 300ms ease;
  background-color: #0096ff;
}
.toggle-demo {
  content: '';
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-top;
  width: 40px;
  height: 15px;
  border-radius: 8px;
  background-color: lightgray;
}
.toggle-demo.sel-outer { background-color: rgba(0, 150, 255, 0.8); }

The needed JavaScript snippets to toggle the state of the toggle switch on click.

/////////////////////////
/////////VARIABLES///////
/////////////////////////
var findBlip;
var blipped;
var slideToggle = document.querySelectorAll('.slide-toggle');
/////////////////////////
/////////FUNCTIONS///////
/////////////////////////
//Adds the 'blip' effect when clicked
//TODO: FIGURE OUT WHY ITS BLIPPING ALL OF THE BLIPS WHEN ITS BLIPPED......WHAT?!
// function handleCheckTwo(e){
//     findBlip = this.parentElement.querySelectorAll('.blip');
//     findBlip.forEach(blip => blip.classList.add('blipped'));
//     setTimeout(function(){
//         findBlip.forEach(blip => blip.classList.remove('blipped'));
//     }, 520);
// }
//Applies new position and color based on :checked
function isChecked(){
    if(this.checked == true){
        findBlip = this.parentElement.querySelector('.blip');
        this.parentElement.querySelector('.toggle-demo').classList.add('sel-outer');
        this.parentElement.querySelector('.toggle-selector').classList.add('sel-inner');
        // setTimeout(function(){
        //     findBlip.classList.remove('blipped');
        // }, 520);
        console.log('checked');
    } else if(this.checked == false){
        this.parentElement.querySelector('.toggle-demo').classList.remove('sel-outer');
        this.parentElement.querySelector('.toggle-selector').classList.remove('sel-inner');
        console.log('unchecked');
    }
}
/////////////////////////
//////EVENT LISTENERS////
/////////////////////////
slideToggle.forEach(slide => slide.addEventListener('click', isChecked));
// slideToggle.forEach(slide => slide.addEventListener('click', handleCheckTwo));