Before and After Slider using jQuery

In this article, we will understand the before and after slider using jQuery. It is used for comparing before and after images side by side. In this we use range slider that allows user to control how the two image display on the screen.

Example 1:

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  Before and After Slider using  jQuery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<script src = ?https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js?> </script>
<style>
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
h1 {
  color: red;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.8vw;
  letter-spacing: 5px;
  line-height: 1;
  margin: 0;
}
html,
body {
  font-family: "Open Sans", sans-serif;
  background-color: #f3f3f3;
}
.ba-card {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  margin-top: 20px;
  box-shadow: 0px 7px 43px -6px rgba(0, 0, 0, 0.75);
}
.ba-card::after {
  clear: both;
  content: "";
  display: block;
}
.ba-card img {
  width: 100%;
  height: auto;
}
@media screen and (min-width: 768px) {
  .ba-card {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  .ba-card::after {
    clear: both;
    content: "";
    display: block;
  }
}
a {
  text-decoration: none;
}
a:link, a:visited {
  color: #666;
}
a:hover, a:focus {
  border-bottom: 1px solid #666;
}
.twenty-horizontal .twenty-handle:before, .twenty-horizontal .twenty-handle:after, .twenty-vertical .twenty-handle:before, .twenty-vertical .twenty-handle:after {
  content: " ";
  display: block;
  background: white;
  position: absolute;
  z-index: 30;
  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.twenty-horizontal .twenty-handle:before, .twenty-horizontal .twenty-handle:after {
  width: 3px;
  height: 9999px;
  left: 50%;
  margin-left: -1.5px;
}
.twenty-vertical .twenty-handle:before, .twenty-vertical .twenty-handle:after {
  width: 9999px;
  height: 3px;
  top: 50%;
  margin-top: -1.5px;
}
.twenty-before-label, .twenty-after-label, .twenty-overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.twenty-before-label, .twenty-after-label, .twenty-overlay {
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.twenty-before-label, .twenty-after-label {
  -webkit-transition-property: opacity;
    transition-property: opacity;
}
.twenty-before-label:before, .twenty-after-label:before {
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  line-height: 38px;
  padding: 0 20px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.twenty-horizontal .twenty-before-label:before, .twenty-horizontal .twenty-after-label:before {
  top: 50%;
  margin-top: -19px;
}
.twenty-vertical .twenty-before-label:before, .twenty-vertical .twenty-after-label:before {
  left: 50%;
  margin-left: -45px;
  text-align: center;
  width: 90px;
}
.twenty-left-arrow, .twenty-right-arrow, .twenty-up-arrow, .twenty-down-arrow {
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
}
.twenty-left-arrow, .twenty-right-arrow {
  top: 50%;
  margin-top: -6px;
}
.twenty-up-arrow, .twenty-down-arrow {
  left: 50%;
  margin-left: -6px;
}
.twenty-container {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  z-index: 0;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
}
.twenty-container img {
  max-width: 100%;
  position: absolute;
  top: 0;
  display: block;
}
.twenty-container * {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.twenty-before-label:before {
  content: "Before";
}
.twenty-after-label {
  opacity: 1;
}
.twenty-after-label:before {
  content: "After";
}
.twenty-horizontal .twenty-before-label:before {
  left: 10px;
}
.twenty-overlay {
  -webkit-transition-property: background;
  -moz-transition-property: background;
  transition-property: background;
  background: rgba(0, 0, 0, 0);
  z-index: 25;
}
.twenty-overlay:hover {
  background: rgba(0, 0, 0, 0.5);
}
.twenty-overlay:hover .twenty-after-label, .twenty-before-label {
  opacity: 1;
}
.twenty-before, .twenty-after {
  z-index: 20;
}
.twenty-horizontal .twenty-handle:before {
  bottom: 50%;
  margin-bottom: 22px;
  box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.twenty-vertical .twenty-handle:before {
  left: 50%;
  margin-left: 22px;
  box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.twenty-vertical .twenty-handle:after {
  right: 50%;
  margin-right: 22px;
  box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.twenty-left-arrow {
  border-right: 6px solid white;
  left: 50%;
  margin-left: -17px;
}
.twenty-right-arrow {
  border-left: 6px solid white;
  right: 50%;
  margin-right: -17px;
}
.twenty-up-arrow {
  border-bottom: 6px solid white;
  top: 50%;
  margin-top: -17px;
}
.twenty-down-arrow {
  border-top: 6px solid white;
  bottom: 50%;
  margin-bottom: -17px;
}
.twenty-before-label:before, .twenty-after-label:before {
  color: #666b7a;
  font-size: 23px;
  letter-spacing: 0.1em;
}
.twenty-handle {
  height: 38px;
  width: 38px;
  background-color: #3c667e;
  position: absolute;
  left: 50%;
  top: 30%;
  margin-left: -22px;
  margin-top: -12px;
  border: 3px solid white;
  -webkit-border-radius: 1000px;
  -moz-border-radius: 1000px;
  border-radius: 1000px;
  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  z-index: 40;
  cursor: pointer;
}
.twenty-before-label:before, .twenty-after-label:before {
  color: #233e8f;
  font-size: 23px;
  letter-spacing: 0.1em;
}
</style>
<body>
<h1> Example: Before and After Slider Using jquery </h1>
<div class = "ba-card">
	<div class = "horizontal-ba">
<img src = "https://static.companycam.com/rQmyi0raeeA1457553857.jpg"> <img src = "https://static.companycam.com/0wYEGR0UEV41457553857.jpg>
	</div>
</div>
<script>
(function (module) {
	if (typeof define === 'function' && define.amd) {
		define(['jquery'], module);
	} else {
		module(jQuery);
	}
})(function(jQuery, undefined) {
			    threshold = 6,
	    add = jQuery.event.add,
	    remove = jQuery.event.remove,
	    trigger = function(node, type, data) {
	    	jQuery.event.trigger(type, data, node);
	    };
	    mouseevents = {
	    	move: 'mousemove',
	    	cancel: 'mouseup dragstart',
	    	end: 'mouseup'
	    },
	    touchevents = {
	    	move: 'touchmove',
	    	cancel: 'touchend',
	    	end: 'touchend'
	    };	
	function Timer(fn){
		var callback = fn,
		    active = false,
		    running = false;	
		function trigger(time) {
			if (active){
				callback();
				requestFrame(trigger);
				running = true;
				active = false;
			}
			else {
				running = false;
			}
		}	
		this.kick = function(fn) {
	function returnTrue() {
		return true;
	}
	function returnFalse() {
		return false;
	}
	function preventDefault(e) {
		e.preventDefault();
	}
	function preventIgnoreTags(e) {
			if (ignoreTags[ e.target.tagName.toLowerCase() ]) { return; }	
		e.preventDefault();
	}
	function isLeftButton(e) {
		return (e.which === 1 && !e.ctrlKey && !e.altKey);
	}
	
	function changedTouch(e, event) {
		var touch = identifiedTouch(e.changedTouches, event.identifier);
		if (!touch) { return; }
pageX === event.pageX && touch.pageY === event.pageY) { return; }
		return touch;
	}
	function mousedown(e){
		var data;
		if (!isLeftButton(e)) { return; }
		data = {
			target: e.target,
			startX: e.pageX,
			startY: e.pageY,
			timeStamp: e.timeStamp
		};
		add(document, mouseevents.move, mousemove, data);
		add(document, mouseevents.cancel, mouseend, data);
	}
	function mousemove(e){
		var data = e.data;
		checkThreshold(e, data, e, removeMouse);
	}
	function mouseend(e) {
		removeMouse();
	}
	function removeMouse() {
		remove(document, mouseevents.move, mousemove);
		remove(document, mouseevents.cancel, mouseend);
	}
	function touchstart(e) {
		var touch, template;
		if (ignoreTags[ e.target.tagName.toLowerCase() ]) { return; }
		touch = e.changedTouches[0];
		template = {
			target: touch.target,
			startX: touch.pageX,
			startY: touch.pageY,
			timeStamp: e.timeStamp,
			identifier: touch.identifier
		};
		add(document, touchevents.move + '.' + touch.identifier, touchmove, template);
		add(document, touchevents.cancel + '.' + touch.identifier, touchend, template);
	}
	function touchmove(e){
		var data = e.data,
		    touch = changedTouch(e, data);
		if (!touch) { return; }
		checkThreshold(e, data, touch, removeTouch);
	}
	function touchend(e) {
		var template = e.data,
		    touch = identifiedTouch(e.changedTouches, template.identifier);
		if (!touch) { return; }
		removeTouch(template.identifier);
	}
	function removeTouch(identifier) {
		remove(document, '.' + identifier, touchmove);
		remove(document, '.' + identifier, touchend);
	}
	function checkThreshold(e, template, touch, fn) {
		var distX = touch.pageX - template.startX,
		    distY = touch.pageY - template.startY;
		if ((distX * distX) + (distY * distY) < (threshold * threshold)) { return; }
		triggerStart(e, template, touch, distX, distY, fn);
	}
	function handled() {
		this._handled = returnTrue;
		return false;
	}
function activeMousemove(e) {
		var timer = e.data.timer;
		e.data.touch = e;
		e.data.timeStamp = e.timeStamp;
		timer.kick();
	}
	function activeMouseend(e) {
		var event = e.data.event,
		    timer = e.data.timer;
		removeActiveMouse();
		endEvent(event, timer, function() {
			setTimeout(function(){
				remove(event.target, 'click', returnFalse);
			}, 0);
		});
	}
	function removeActiveMouse(event) {
		remove(document, mouseevents.move, activeMousemove);
		remove(document, mouseevents.end, activeMouseend);
	}
	function activeTouchmove(e) {
		var event = e.data.event,
		    timer = e.data.timer,
		    touch = changedTouch(e, event);
		if (!touch) { return; }
		e.preventDefault();
		event.targetTouches = e.targetTouches;
		e.data.touch = touch;
		e.data.timeStamp = e.timeStamp;
		timer.kick();
	}
	function activeTouchend(e) {
		var event = e.data.event,
		    timer = e.data.timer,
		    touch = identifiedTouch(e.changedTouches, event.identifier);
		if (!touch) { return; }
		removeActiveTouch(event);
		endEvent(event, timer);
	}
            function removeActiveTouch(event) {
		remove(document, '.' + event.identifier, activeTouchmove);
		remove(document, '.' + event.identifier, activeTouchend);
	}
	function endEvent(event, timer, fn) {
		timer.end(function(){
			event.type = 'moveend';
			trigger(event.target, event);		
			return fn && fn();
		});
	}
function setup(data, namespaces, eventHandle) {
		add(this, 'movestart.move', flagAsHandled);
		return true;
	}
	function addMethod(handleObj) {
		if (handleObj.namespace === "move" || handleObj.namespace === "moveend") {
			return;
		}
		add(this, 'dragstart.' + handleObj.guid + ' drag.' + handleObj.guid, preventDefault, undefined, handleObj.selector);
		add(this, 'mousedown.' + handleObj.guid, preventIgnoreTags, undefined, handleObj.selector);
	}
	function removeMethod(handleObj) {
		if (handleObj.namespace === "move" || handleObj.namespace === "moveend") {
			return;
		}	
		remove(this, 'dragstart.' + handleObj.guid + ' drag.' + handleObj.guid);
		remove(this, 'mousedown.' + handleObj.guid);
	}	
	jQuery.event.special.movestart = {
		setup: setup,
		add: addMethod,
		remove: removeMethod,
		_default: function(e) {
			var event, data;
			if (!e._handled()) { return; }
			function update(time) {
				updateEvent(event, data.touch, data.timeStamp);
				trigger(e.target, event);
			}
			data = {
				event: event,
				timer: new Timer(update),
				touch: undefined,
				timeStamp: undefined
			};	
			if (e.identifier === undefined) {
				add(e.target, 'click', returnFalse);
				add(document, mouseevents.move, activeMousemove, data);
				add(document, mouseevents.end, activeMouseend, data);
			}
			else {
				e._preventTouchmoveDefault();
				add(document, touchevents.move + '.' + e.identifier, activeTouchmove, data);
				add(document, touchevents.end + '.' + e.identifier, activeTouchend, data);
			}
		}
	};
	jQuery.event.special.moveend = {
		setup: function() {
			add(this, 'movestart.moveend', jQuery.noop);
		},
	add(document, 'mousedown.move', mousedown); 
	if (typeof Array.prototype.indexOf === 'function') {
		(function(jQuery, undefined){
			var props = ["changedTouches", "targetTouches"],
			    l = props.length;	
			while (l--) {
				if (jQuery.event.props.indexOf(props[l]) === -1) {
					jQuery.event.props.push(props[l]);
				} }
		})(jQuery);
	}; });
 (function($){
  $.fn.twenty = function(options) {
    var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal'}, options);
    return this.each(function() {
      var sliderPct = options.default_offset_pct;
      var container = $(this);
      var sliderOrientation = options.orientation;
      var beforeDirection = (sliderOrientation === 'vertical') ? 'down' : 'left';
      var afterDirection = (sliderOrientation === 'vertical') ? 'up' : 'right';
      container.wrap("<div class='twenty-wrapper twenty-" + sliderOrientation + "'></div>");
      container.append("<div class='twenty-overlay'></div>");
      var beforeImg = container.find("img:first");
      var afterImg = container.find("img:last");
      container.append("<div class='twenty-handle'></div>");
      var slider = container.find(".twenty-handle");
      slider.append("<span class='twenty-" + beforeDirection + "-arrow'></span>");
      slider.append("<span class='twenty-" + afterDirection + "-arrow'></span>");
      var adjustContainer = function(offset) {
      	if (sliderOrientation === 'vertical') {
      	  beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)");
      	}
      	else {
          beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
    	}
        container.css("height", offset.h);
      };
      var adjustSlider = function(pct) {
        var offset = calcOffset(pct);
        slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw);
        adjustContainer(offset);
      }
      $(window).on("resize.twenty", function(e) {
        adjustSlider(sliderPct);
      });
        container.addClass("active");
        offsetX = container.offset().left;
        offsetY = container.offset().top;
        imgWidth = beforeImg.width(); 
        imgHeight = beforeImg.height();          
      });
      slider.on("moveend", function(e) {
        container.removeClass("active");
      });
      container.find("img").on("mousedown", function(event) {
        event.preventDefault();
      });
      $(window).trigger("resize.twenty");
    });
  };
})(jQuery);
$(window).load(function(){
  $(".horizontal-ba").twenty({
    default_offset_pct: 0.7,
    orientation: 'horizontal'
  });
});
$(window).load(function(){
  $(".vertical-ba").twenty({
    default_offset_pct: 0.7,
    orientation: 'vertical'
  });
});
</script>
</body>
</html>

Explanation:

In the above example, we created a example of before and after slider using jquery. In this we have two images for comparison, one effective, and another simple UI element. We used jQuer based before after viewer that can be used to compare two images with a draggable & swipeable slider.

Output:

Following is the output of this example.