Cacher is the code snippet organizer for pro developers

<style>
.image-slider {
position:relative;
display: inline-block;
}
.image-slider > div {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 50%;
overflow: hidden;
}
.image-slider img {
display: block;
user-select: none;
}
.image-slider input {
position: absolute;
left: 0;
bottom: 10px;
width: 100%;
margin: 0;
/*使得控件更加明显*/
filter: contrast(.5);
mix-blend-mode: luminosity;
/*使可控区域变大*/
width: 50%;
transform: scale(2);
transform-origin: left bottom;
}
</style>

<div class="image-slider">
    <img src="adamcatlace-before.jpg" alt="Before" />
    <img src="adamcatlace-after.jpg" alt="After" />
</div>

<script>
$$('.image-slider').forEach(function(slider) {
// 创建附加的div元素，并用它包住第一个图片元素
var div = document.createElement('div');
var img = slider.querySelector('img');
slider.insertBefore(img, div);
div.appendChild(img);
// 创建滑块
var range = document.createElement('input');
range.type = 'range';
range.oninput = function() {
div.style.width = this.value + '%';
};
slider.appendChild(range);
});
</script>