<html>
	<title> CompareKit </title>
	<header>
		<style>
			
.slider {
    position: relative;
    overflow: hidden;
}
 
.slider img {
    width: 100%;
    display:block;
    max-width:none;
}
 
.slider .resize {
    position: absolute;
    top:0;
    left: 0;
    height: 100%;
    width: 50%;
    overflow: hidden;
}

.slider .handle {
  position:absolute; 
  left:50%;
  top:0;
  bottom:0;
  width:4px;
  margin-left:-2px;
 
  background: rgba(0,0,0,.5);
  cursor: ew-resize;
}

.slider .handle.ba-draggable:after {
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    line-height:50px;
    font-size:30px;
}


.texts {
	
	position: absolute;
	top: 0;
	color: #FF8333;
	font-size: 50.0;
	text-align: left;
	padding: 24px;
	
}

		</style>
	</header>
	
	<body>
		<div class="slider">

			<img src="img/demo_L.png">
			<div class="resize">
				<img src="img/mononized.png">
   			</div>
   			<span class="handle"></span>
		</div>
		<span class="texts" > Input left view </span>
		<span class="texts" style="right: 0"> Mononized view </span>		
		<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
		<script type="text/javascript">
!function(a){function b(b,c,d){b.on("mousedown.ba-events touchstart.ba-events",function(e){b.addClass("ba-draggable"),c.addClass("ba-resizable");var f=e.pageX?e.pageX:e.originalEvent.touches[0].pageX,g=b.outerWidth(),h=b.offset().left+g-f,i=d.offset().left,j=d.outerWidth();minLeft=i+10,maxLeft=i+j-g-10,b.parents().on("mousemove.ba-events touchmove.ba-events",function(b){var c=b.pageX?b.pageX:b.originalEvent.touches[0].pageX;leftValue=c+h-g,leftValue<minLeft?leftValue=minLeft:leftValue>maxLeft&&(leftValue=maxLeft),widthValue=100*(leftValue+g/2-i)/j+"%",a(".ba-draggable").css("left",widthValue),a(".ba-resizable").css("width",widthValue)}).on("mouseup.ba-events touchend.ba-events touchcancel.ba-events",function(){b.removeClass("ba-draggable"),c.removeClass("ba-resizable"),a(this).off(".ba-events")}),e.preventDefault()})}a.fn.beforeAfter=function(){var c=this,d=c.width()+"px";c.find(".resize img").css("width",d),b(c.find(".handle"),c.find(".resize"),c),a(window).resize(function(){var a=c.width()+"px";c.find(".resize img").css("width",a)})}}(jQuery);
 $('.slider').beforeAfter();
		</script>
	</body>
</html>