JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<input type="checkbox" value="0" class="switch" id="center">

CSS

input[type=checkbox].switch {
  -webkit-appearance: none;
}

.switch {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  border-radius: 32px;
  width: 50px;
  height: 30px;
  outline: none;
  -webkit-animation-duration: .55s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-name: switchOff;
}

.switch.active {
  -webkit-animation-duration: .3s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-name: switchOn;
}

.switch:after {
  position: absolute;
  top: 1px;
  left: 1px;
  display: inline-block;
  content: "";
  border-radius: 28px;
  width: 28px;
  height: 28px;
  background-color: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.2);
  -webkit-transition-duration: .3s;
}

.switch.is-active,
.switch:checked {
  background: #4cd964;
  box-shadow: inset 0 0 0 0 #4cd964;
  -webkit-transition-duration: 0.2s;
  -webkit-animation-duration: .3s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-name: box-shadow-reset;
}

.switch.is-active:after,
.switch:checked:after {
  -webkit-transform: translate3d(19px, 0, 0);
  -webkit-transition-duration: .3s;
}

.switch.active.is-active:after,
.switch.active:checked:after {
  -webkit-transition-duration: .3s;
  -webkit-transform: translate3d(11px, 0, 0);
  width: 35px;
}

.switch.active:after {
  -webkit-transition-duration: .3s;
  width: 35px;
}

@-webkit-keyframes switchOff {
  0% {
      box-shadow: inset 0 0 0 15px #e6e6e6, inset 0 0 3px 1px rgba(0, 0, 0, 0.2);
      border: 1px solid #e6e6e6;
  }
  49.999% {
      box-shadow: inset 0 0 0 0 #e6e6e6, inset 0 0 3px 1px rgba(0, 0, 0, 0.2);
      border: 1px solid #e6e6e6;
  }
  50% {
      box-shadow: inset 0 0 0 0 #fff, inset 0 0 3px 1px rgba(0, 0, 0, 0.2);
      border: 1px solid #e6e6e6;
  }
  100% {
      box-shadow: inset 0 0 3px...

JavaScript

$(document).on("ready", function () {

  var x1, y1, x2, y2, x3, y3;

  //deals with the "infocus states"
  $(".switch")
  .on("mousedown touchstart", function (e) {
    event.preventDefault();
    $(this).addClass("active");
    var touch = e.originalEvent.touches[0];
    x1 = touch.pageX;
    y1 = touch.pageY;
  })
  .on("mousemove touchmove", function (e) {
    //console.log(touch.pageX + "," + touch.pageY);
    var touch = e.originalEvent.touches[0];
    x2 = touch.pageX;
    y2 = touch.pageY;
    if(x2-x1 > 0 && $(this).prop("checked") == false)
    {
      $(this).prop("checked", true);
    }
    else if(x2-x1 < 0 && $(this).prop("checked") == true)
    {
      $(this).prop("checked", false);
    }
  })
  .on("mouseup touchend", function (e) {
    $(this).removeClass("active");
    var touch = e.originalEvent.changedTouches[0];
    x3 = touch.pageX;
    y3 = touch.pageY;
    if(x3-x1 == 0)
    {
      $(this).prop("checked", !$(this).prop("checked"));
    }
  });
});