JSFiddle - React, Tailwind, and code Playground

HTML

<div class="before_after_slider">
  <div class="color">
  <img src="http://i.picresize.com/images/2013/04/06/9pX4.png" width="640" height="400" alt="" />
  </div>
  <div class="black_white">
  <img src="http://i.picresize.com/images/2013/04/06/2sJzq.png" width="640" height="400"  alt="black_white" />
  </div>
</div>

CSS

.before_after_slider {
  position: relative;
  margin: 60px;
  width: 640px;
  height: 400px;
  & > * {
  position: absolute;
  }
}

.black_white {
  overflow: hidden;
}

JavaScript

var $black_white = $('.black_white'),
     img_width = $('.black_white img').width(),
     init_split = Math.round(img_width/2);

  $black_white.width(init_split);

     $('.before_after_slider').mousemove(function(e){
     var offX  = (e.offsetX || e.clientX - $black_white.offset().left);
       $black_white.width(offX);
     });

     $('.before_after_slider').mouseleave(function(e){
     $black_white.stop().animate({
     width: init_split
     },1000)