JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="comparing">
    <p id="l"><img src="http://lh5.ggpht.com/-lkFKWgt06Pg/TJxBBR3bl2I/AAAAAAAAAEY/WpP4zaWIEFc/s800/tiggres.jpg"></p>
    <p id="r"><img src="http://lh3.ggpht.com/-K2SdqE004V0/TJxBG0-vtOI/AAAAAAAAAEY/pNRTiiSQd9g/s800/Green%252520Tees.jpg"></p>
    <p id="sld"><span id="sld_l">&lt;</span><span id="sld_r">&gt;</span></p>
  </div>

CSS

*{margin:0;padding:0;}

#comparing{
  position:relative;
  width:500px;
  height:500px;
  margin:10px 0 0 10px;
  overflow:hidden;
  -webkit-user-select:none;
  -moz-user-select:none;
}

#comparing p{
  display:block;
  position:absolute;
}

#l{
  width:500px;
  height:500px;
}

#r{
  width:250px;
  overflow:hidden;
  height:500px;
  left:250px;
}

#r img{margin-left:-250px}

#sld{
  left:250px;
  top:50%;
  width:40px;
  height:40px;
  margin:-22px 0 0 -22px;
  background:#000;
  border:2px solid #FFF;
}

#sld:after{clear:both}

#sld span{
  width:20px;
  height:40px;
  display:block;
  color:#FFF;
  line-height:40px;
  text-align:center;
}

#sld span::selection{
  background:none;
}

#sld_l{
  cursor:w-resize;
  float:left;
}

#sld_r{
  cursor:e-resize;
  float:right;
}

JavaScript

var slide = (function(){
  var minX = 0;
  var maxX = 500;
  return function(_x){
    var offset = $("#r").css("left");
    offset = offset.slice(0,offset.indexOf("px"))*1;
    offset = offset + _x;
            
    var offset2 = $("#r").css("width");
    offset2 = offset2.slice(0,offset2.indexOf("px"))*1;
    offset2 = offset2 + (_x*-1);

    if(offset > minX && offset < maxX){
      $("#r").css({
        left:offset+"px",
        width:offset2+"px"
      });

      $("#r img").css({
        marginLeft:-offset+"px"
      });
      
      $("#sld").css({
        left:offset+"px"
      });
    };
  }
})();


$(function(){
  $("#sld span").bind("mousedown",function(e){
    var _x = e.pageX;
    $("body").bind("mousemove",function(e){
      slide(e.pageX - _x);
      _x = e.pageX;
    });
    $("body").bind("mouseup",function(e){$(this).unbind()});
  });
});