Image Comparison Slider

by Sebastian Kay

HTML

<div id="beforeAfterSlidebar">
    <div id="topImage"><img src="https://community.devexpress.com/blogs/aspnet/16.2Release/ASPScheduler162/ASPScheduler_Old161Look.png" width="750" height="469" alt="before" /></div>
</div>

CSS

#beforeAfterSlidebar {
  position: relative;
  width: 300px;
  height: 400px;
	overflow:hidden;
}
#beforeAfterSlidebar div {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}
#topImage {
	position: absolute;
	right:0px;
  border-right: solid 4px black;
}

JavaScript

let beforeAfterSlidebar = document.getElementById("beforeAfterSlidebar");

beforeAfterSlidebar.addEventListener('mousemove', (e) => {
      var iTopWidth = (e.pageX - 0);
			console.log(iTopWidth);
			
      document.getElementById("topImage").style.width = iTopWidth+"px";
	});