ビフォーアフタースライダー

<div class="before_after_slider">
	<div class="box_before" id="js-boxBefore">
		<img src="/Path/to/images/before.png" alt="ビフォー画像"> //左側の画像
	</div>
	<div class="box_after">
		<img src="/Path/to/images/after.png" alt="アフター画像"> //右側の画像
	</div>
	<input type="range" min="0" max="100" value="50" oninput="beforeAfterSlider()" onchange="beforeAfterSlider()" class="slider_range" id="js-sliderRange">
</div>

.before_after_slider {
	position: relative;
	overflow: hidden;
	width: 800px;
	max-width: 100%;
	margin: 0 auto;
	}
.box_before {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 50%;
	height: 100%;
	border-right: 3px solid rgba(255,255,255,.7);
	}
.box_before img {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
	}
.box_before::before {
	content: '';
	z-index: 1;
	position: absolute;
	top: 0;
	right: -24px;
	bottom: 0;
	width: 44px;
	height: 44px;
	margin: auto;
	background-color: rgba(255,255,255,.7);
	border-radius: 50%;
	}
.slider_range {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: col-resize !important;
	}

function beforeAfterSlider() {
		document.getElementById("js-boxBefore").style.width = document.getElementById("js-sliderRange").value + "%";
	}