A CodePen by Tony Meyer. Slide to Check - A mobile friendly interactive checkbox. Slide or tap the checkbox to toggle it.

index.html

<input type='checkbox'><br>
<input type='checkbox' checked><br>
<input type='checkbox'>

script.js

function startDrag(el) {
  if (!el.dragData) {
    var ecx = event.clientX||event.touches[0].clientX;
    el.dragData={
      x: ecx-el.offsetLeft
    };
  };
}

function drag(el) {
  if (el.dragData) {
    el.isDragging = true;
    var ecx = event.clientX||event.touches[0].clientX;
    el.style.setProperty('-webkit-transition', 'none');
    if (ecx-el.dragData.x >= 0
        && ecx-el.dragData.x <= el.parentNode.offsetWidth-el.offsetWidth) {
    el.style.setProperty('left', ecx-el.dragData.x+'px');
  }
  }
}

function stopDrag(el) {
  if (el.isDragging) {
    if (event.type == 'mouseup'
        || event.type == 'touchend' ) {
      
      el.addEventListener('click', function(e){e.preventDefault();this.removeEventListener('click', arguments.callee, false)}, false);
    }
    el.isDragging = false;
  }
  if (el.dragData) {
    if ((el.offsetLeft+(el.offsetWidth/2)) >= (el.parentNode.offsetWidth/2)) {
      el.checked = true;
    } else {
      el.checked = false;
    }
    el.style.removeProperty('-webkit-transition');
    el.style.removeProperty('left');
    el.dragData = null;
  }
}

var inputs = document.getElementsByTagName('input');
for (var i=0; i<inputs.length; i++) {
  var input = inputs[i];
  if (input.hasAttribute('type') && input.attributes['type'].value == 'checkbox') {
    var checkbox = input;
    var track = document.createElement('label');
    track.className='track'; 
    track.appendChild(checkbox.cloneNode(true)); 
    checkbox.parentNode.replaceChild(track, checkbox);
    checkbox = track.firstChild;

    checkbox.addEventListener( 'mousedown', function(){startDrag(this)}, false);
    checkbox.addEventListener('touchstart', function(){startDrag(this)}, false);
    checkbox.addEventListener( 'mousemove', function(){     drag(this)}, false);
    checkbox.addEventListener( 'touchmove', function(){     drag(this)}, false);
    checkbox.addEventListener(   'mouseup', function(){ stopDrag(this)}, false);
    checkbox.addEventListener(  'mouseout', function(){ stopDrag(this)}, false);
    checkbox.addEventListener(  'touchend', function(){ stopDrag(this)}, false);
  }
}

/*****************************
Make CodePen Mobile Friendy
*****************************/
var meta = document.createElement('meta'); meta.name='viewport';
meta.content ='width=device-width, initial-scale=1, maximum-scale=1'; document.head.appendChild(meta);

style.css

[type=checkbox] {
  appearance: none;
  width: 55%;
  height: 112%;
  top: -6%;
  border-radius: inherit;
  background-image:
    linear-gradient(
      hsl(210, 70%, 30%),
      hsl(200, 50%, 20%)
    );
  cursor: pointer;
  left: 0;
  transition: left 0.5s;
  position: absolute;
  box-sizing: border-box;
  border: solid 1px hsl(210, 70%, 30%);
  box-shadow:
    inset 0  1px 1px hsla(0, 0%, 100%, 0.2),
    inset 0 -1px 1px hsla(0, 0%,   0%, 0.2),
          0  1px 4px hsla(0, 0%,   0%, 0.5);
  z-index: 1;
}

[type=checkbox]:checked {
  left: 45px;
}

label.track {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 40px;
  box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.75);
  background-image:
    linear-gradient(
      left,
      hsla(210, 50%, 55%, 0.75) 50%,
      transparent 50%
    ),
    linear-gradient(
      hsl(0, 0%, 65%),
      hsl(0, 0%, 85%)
    );
  border-radius: 10px;
  margin: 3px;
}

label.track:before,
label.track:after {
  display: block;
  position: absolute;
  width: 50%;
  line-height:40px;
}

label.track:before {
  content: 'On';
  color: hsl(0, 0%, 100%);
  left: 0;
}

label.track:after {
  content: 'Off';
  right: 0;
}

/*****************
  Centering
*****************/
html, body { height:100%; }
html {
  display: table;
  width: 100%;
}
body {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background-image:
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaBAMAAABbZFH9AAAABGdBTUEAALGPC/xhBQAAACFQTFRF7+/v6+vr7e3t7e3t7Ozs7+/v7Ozs7u7u6+vr+vr6+vr6ea5KEQAAAAt0Uk5TPVdSTFJBV0heAwWSAGUvAAAA+ElEQVQY0yWQsXEEIQxFlXo72BJuC7Bn6QClDjwQ2h6PRegMFeA5qQPoQKryxN4ISMT/70vw8fr9+fd7v/+/f/28Ac9pc45pcQx4K1utrNp2UeAxzHyae/yA3pK2UgpjJwW0ETXH6hmI4lGxnZ0Sdkg+fRnGHQNOIWbOBaXWA/ZQWSDHAgJSVmHeaupJ4Jxu0RyXK0QMkb13Tb0wcKR44kIIfO6qmSIncYdjTPcRvCsniQq1JCjSG2QLjcczYhLIWaLLx4lEO+hT4YsZ83HCVqn0FrbwMi+cLWeHE2upvd1ypXaDujYWhiuNQ0pYmBMV0VoA17rsKvcHSU6n9nFMsFQAAAAASUVORK5CYII=),
    radial-gradient(
      circle,
      hsl(220, 35%, 50%),
      hsl(220, 80%, 20%)
    );
  background-position: 50% 50%;
}