Schieberegler für Bildvergleich


Quellcode
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">


<style>
.wrapper{position: relative; height: 500px; width: 750px; overflow: hidden;}
.wrapper .images{height: 100%; width: 100%; display: flex;}
.wrapper .images .img-1{height: 100%; width: 100%; background: url("../Extra/imgimages/img.jpg") no-repeat;}
.wrapper .images .img-2{position: absolute; height: 100%; width: 50%; background: url("../Extra/imgimages/img.png") no-repeat;}
.wrapper .slider{position: absolute; top: 0; width: 100%; z-index: 99;}
.wrapper .slider input{width: 100%; outline: none; background: none; -webkit-appearance: none;}
.slider input::-webkit-slider-thumb{height: 486px; width: 3px; background: none; -webkit-appearance: none; cursor: col-resize;}
.slider .drag-line{width: 3px; height: 486px; position: absolute; left: 49.85%; pointer-events: none;}
.slider .drag-line::before, .slider .drag-line::after{position: absolute; content: ""; width: 100%; height: 222px; background: #fff;}
.slider .drag-line::before{top: 0;}
.slider .drag-line::after{bottom: 0;}
.slider .drag-line span{height: 42px; width: 42px; border: 3px solid #fff; position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%);}
.slider .drag-line span::before, .slider .drag-line span::after{position: absolute; content: ""; top: 50%; border: 10px solid transparent;
border-bottom-width: 0px; border-right-width: 0px; transform: translate(-50%, -50%) rotate(45deg);}
.slider .drag-line span::before{left: 40%; border-left-color: #fff;}
.slider .drag-line span::after{left: 60%; border-top-color: #fff;}
</style>
</head>

<body>
<div class="wrapper">
<div class="images">
<div class="img-1"></div>
<div class="img-2"></div>
</div>
<div class="slider">
<div class="drag-line">
<span></span>
</div>
<input type="range" min="0" max="100" value="50">
</div>
</div>

<script>
const slider = document.querySelector(".slider input");
const img = document.querySelector(".images .img-2");
const dragLine = document.querySelector(".slider .drag-line");
slider.oninput = ()=>{
let sliderVal = slider.value;
dragLine.style.left = sliderVal + "%";
img.style.width = sliderVal + "%"; }
</script>
</body>

</html>