Simple Image compare slider

by scurrilus

HTML

<div class="bg-slider">
  <div class="bg-slider--wrapper">
    <div class="bg-slider--button"></div>
    <div class="bg-slider--img1">
     <img src="https://dummyimage.com/500x250/e02fe0/fff"/>
    </div>
    <div class="bg-slider--img2">
      <img src="https://dummyimage.com/500x250/2fdec4/fff"/>
    </div>
  </div>
</div>

<div class="test">
  <div class="button-position"></div>
   <div class="mouse-position-x"></div>
   <div class="mouse-position-y"></div>
    <div class="mouse-position-current"></div>
</div>

SCSS

.bg-slider {
  width: 500px;
  height: 250px;
  position: relative;
  user-select: none;
  -moz-user-select: none;
  overflow: hidden;
  
  .bg-slider--button,
  .bg-slider--img1, 
  .bg-slider--img2 {
    user-select: none;
    -moz-user-select: none;
    
    img {
      user-select: none;
      -moz-user-select: none;
    }
  }
  
  .bg-slider--button {
    display: table;
    background: #cc0000;
    position: absolute;
    height: 100%;
    width: 10px;
    left: calc(50% - 5px);
    z-index: 2;
  }
  
  .bg-slider--img1, 
  .bg-slider--img2 {
    display: block;
    height: 100%;
    width: 100%;
    position:absolute;
    user-select: none;
    -moz-user-select: none;
    
    img {
      display: block;
    }
  }
  
  .bg-slider--img1 {
    background: #32fd21;
    width: calc(50% - 5px);
    overflow: hidden;
    z-index: 1;
  }
  
  .bg-slider--img2 {
    background: #64dd11;
  }
}

JavaScript

var buttonPosition = jQuery(".bg-slider").find(".bg-slider--button").position();

jQuery( ".bg-slider--button" ).mousedown(function() {
    jQuery( this ).addClass( "move" );
  }).mouseup(function() {
    jQuery( this ).removeClass( "move" );
  }).mouseup(function() {
  	jQuery( this ).removeClass( "move" );
  });

var parentOffset = jQuery( ".bg-slider--wrapper" ).offset(); 
  jQuery( ".bg-slider--wrapper" ).mousemove(function(e) {
  	if (jQuery( ".bg-slider--button" ).hasClass("move")) {
    	var relX = e.pageX - parentOffset.left,
      		relY = e.pageY - parentOffset.top;
  
    	jQuery(".bg-slider--button").css({left: relX + "px"});
    	jQuery(".bg-slider--img1").css({width: relX + "px"});
      
      // Just for Testing
      jQuery(".mouse-position-x").text(relX);
  		jQuery(".mouse-position-y").text(relY);
  	}
 	});
  // Just for Testing
  
  jQuery(".button-position").text(buttonPosition.left);