JSFiddle - React, Tailwind, and code Playground

by hutber

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.10/hammer.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.hammerjs/1.1.2/jquery.hammer-full.min.js"></script>
<script src="//cdn.jsdelivr.net/modernizr/2.8.2/modernizr.min.js"></script>
<div class="onoff"><div class="entry" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><span class="animate" style="-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);"></span><yes>Yes</yes><div class="yes"></div><nothing>Nothing</nothing><div class="null"></div><no>No</no><div class="no"></div></div></div>

CSS

.onoff .entry {
width: 60%;
margin-top: 50px;
border: 2px solid #6CB7B4;
background: linear-gradient(#848484, #A2A2A2) repeat scroll 0 0 rgba(0, 0, 0, 0);
position: relative;
}
.onoff .entry span {
background: linear-gradient(#FDFDFD 0%, #FFF 3%, #FCFCFC 13%, #E4E4E4 50%, #DDD 55%, #D0D0D0 85%, #CDCDCD 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 2px solid #E8E8E8;
border-radius: 50px;
box-shadow: 0 5px 5px rgba(50, 50, 50, 0.2);
display: block;
height: 230%;
width: 19%;
margin-left: -9.5%;
position: absolute;
top: -80%;
left: 50%;
transform: translate3d(0px, 0px, 0px);
z-index: 4;
}
.animate {
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;
transition: transform 0.2s;
}

.onoff .entry div {
width: 23.72881%;
float: left;
margin-right: 1.69492%;
display: inline;
}

JavaScript

function isNumber(n) {
	return !isNaN(parseFloat(n)) && isFinite(n);
}
var SD = {};
	SD.onoff = function(el){
		var myself = this,
		slider = el.find('span'),
		sliderWidth = el.width(),
		sliderHalf = sliderWidth / 2,
		sliderBreakPoint = sliderWidth/4,
		sliderCurrentPos = parseInt(slider[0].style.webkitTransform.slice(12,15)),
		sliderAmount = 0;

		var hammerOptions = {
				dragBlockVertical: true,
				dragLockToAxis: true
		};

		//setup slides
		el.hammer(hammerOptions).on("release dragleft dragright swipeleft swiperight", function(ev) { checks(ev); });

		function checks (ev){
			sliderCurrentPos = parseInt(slider[0].style.webkitTransform.slice(12,15));

			if(ev.type === "release" && isNumber(sliderCurrentPos) && sliderCurrentPos !== 0){
				sliderAmount = sliderCurrentPos;
			}else{
				sliderAmount = ev.gesture.deltaX;
			}

			switch(ev.type) {
				case 'dragright':
				case 'dragleft':
					myself.setelOffset(sliderAmount);
					break;

				case 'swipeleft':
					myself.setelOffset(-sliderHalf, true);
					ev.gesture.stopDetect();
					break;

				case 'swiperight':
					myself.setelOffset(sliderHalf, true);
					ev.gesture.stopDetect();
					break;

				case 'release':
					if(sliderCurrentPos > sliderBreakPoint){
						myself.setelOffset(sliderHalf, true);
					}else if(sliderCurrentPos < -sliderBreakPoint){
						myself.setelOffset(-sliderHalf, true);
					}else{
						myself.setelOffset(0, true);
					}
					break;
			}
		}

		this.setelOffset = function(num, animate) {
			slider.removeClass("animate");

			if(animate) {
				slider.addClass("animate");
			}

			if(num < sliderHalf && num > -sliderHalf || animate){
				if(Modernizr.csstransforms3d) {
					slider.css("transform", "translate3d("+ num +"px,0,0) scale3d(1,1,1)");
				}
				else if(Modernizr.csstransforms) {
					slider.css("transform", "translate("+ num +"px,0)");
				}
				else {
					slider.css("left", num*2+"px");
				}
			}
		};
	};

var onOff = new SD.onoff($('.entry'));