Multi-state Microswitch

by Felis Catus

HTML

<span class="switchable" data-on="true">test</span>

CSS

.switchable{
    position:relative;
    padding-left:40px;
}
.switchable:before{
    cursor: pointer;
    position:absolute;
    top: calc(50% - 5px);
    left: 0;
    height: 10px;
    width: 30px;
    border-radius: 6px;
    content:'';
    border:1px solid black;
    background: black;
    transition: box-shadow 200ms linear;
}
.switchable[data-on='true']:before {
    box-shadow: 20px 0 0 0 #0f0 inset, 0 0 0 0 #0f0 inset;
    
}
.switchable[data-on='true'][data-throttle='medium']:before {
    box-shadow: 14px 0 0 0 #ff0 inset, -6px 0 0 0 #ff0 inset;
    
}
.switchable[data-on='true'][data-throttle='slow']:before {
    box-shadow: 8px 0 0 0 #fa0 inset, -12px 0 0 0 #fa0 inset;
    
}
.switchable[data-on='false']:before {
    box-shadow: 0 0 0 0 #f00 inset, -20px 0 0 0 #f00 inset;
}

JavaScript

(function(){
	$('.switchable').on('click', function(evt){
    	if ($(evt.target).attr('data-on')=='true')
      {
      		var throttle = $(evt.target).attr('data-throttle');
          if (!throttle)
          		$(evt.target).attr('data-throttle', 'medium');
          else if(throttle=='medium')
          		$(evt.target).attr('data-throttle', 'slow');
          else
          {
          		$(evt.target).attr('data-on', 'false');
              $(evt.target).removeAttr('data-throttle');
          }
      }
      else
          $(evt.target).attr('data-on', 'true');
    });
})();