JSFiddle - React, Tailwind, and code Playground

by Przemek Misztal

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="wrapper">
	<div class="container">
		<img class="pic" id="col" src="http://i59.tinypic.com/2cyilom.jpg" alt="">
		<img class="pic" id="bw" src="http://i62.tinypic.com/2potvlu.jpg" alt="">
	</div>
	<div id="handle"></div>
</div>

CSS

#wrapper {
	width: 60%;	
}

.container {
	position: relative;
	width: 100%;
}
.pic {
	position: absolute;
	width: 90%;
	display: block;
    max-width: 100%;
    margin-left: 20px;
}
#bw {
	clip: rect(0px, 0px, 800px, 0px);
}
#handle {
	position: absolute;
	top: 350px;
	width: 25px;
	height: 25px;
	background-color: #d42627;
	border-radius: 30px;
}

JavaScript

$( "#handle" ).draggable({ axis: "x",containment: ".container" });
var image = document.querySelector('#bw');

function slide() {
	var i = $('#handle').css('left');
	console.log(i);
	$('#bw').css('clip','rect(0px,' +i+', 800px, 0px)');
	requestAnimationFrame(slide);
}
slide();