JSFiddle - React, Tailwind, and code Playground

by Antony Joyson

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="slideOne">
 <input type="checkbox" value="None" id="slideOne" name="check" checked />
 <label for="slideOne"><a ><img class='slideicon' src="https://openclipart.org/download/215532/1425710397.svg" /></a></label>
 </div>

CSS

.slideOne {width: 50px;height: 10px;
background: #333;
margin: 20px auto;
position: relative;
border-radius: 50px;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);}
.slideOne label {display: block;
width: 16px;height: 16px;
position: absolute;top: -3px;
left: -3px;cursor: pointer;
background: #fcfff4;background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
border-radius: 50px;box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.4s ease;transition: all 0.4s ease;z-index: 9999;}
.slideOne img {position: absolute;height: 16px;width: 16px;top: -3px;left: -4px;visibility: hidden;}
.slideOne input[type=checkbox] {visibility: hidden;}
.slideOne input[type=checkbox]:checked + label {left: 37px;}

JavaScript

$('input[type=checkbox]')
.change(function(){var c = this.checked ? 'hidden' : 'visible';
var length=$(".slideOne label").css("left");
$('body').on('click','img',function(){$('.slideOne label').css('left','-3px !important');})

  $('.slideicon').css('visibility', c);});