before-after-comparison-slide-control.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Before After Comparison Slide Control</title>
	<link rel="stylesheet" href="css/before-after-comparison-slide-control.css">
</head>
<body>
	<div id="comparison">
		<figure>
			<div id="divisor"></div>
		</figure>
		<input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()">
	</div>
</body>
<script>
	var slider = document.getElementById('slider'),
		divisor = document.getElementById('divisor');

		function moveDivisor () {
			divisor.style.width = slider.value+'%';
		}

	window.onload = function () {
		moveDivisor();
	}
</script>
</html>