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

$(".switch")
  .bind("mousedown touchstart", function (e) {
    event.preventDefault();
    var touch = e.originalEvent.touches[0];
    console.log(touch);
    $(this).addClass("active");
  })
  .bind("mousemove touchmove", function (e) {
    //console.log(touch.pageX + "," + touch.pageY);
  })
  .bind("mouseup touchend", function (e) {
    $(this).removeClass("active");
    $(this).trigger("click");
    //$(this).prop("checked", !$(this).prop("checked"));
  });