Сравнение до/после

<div class="cmp" style="--x:50%">
  <img class="under" src="before.jpg">
  <img class="over"  src="after.jpg">
  <div class="handle"></div>
</div>

<style>
.cmp { position: relative; aspect-ratio: 16/9; overflow: hidden;
  cursor: ew-resize; touch-action: none; }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; }
.cmp .over { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.cmp .handle { position: absolute; top: 0; bottom: 0; left: var(--x);
  width: 2px; background: #fff; }
</style>

<script>
var c = document.querySelector(".cmp"), down = false;
function setX(e) {
  var r = c.getBoundingClientRect();
  var x = Math.min(Math.max((e.clientX - r.left) / r.width, .02), .98);
  c.style.setProperty("--x", x * 100 + "%");
}
c.addEventListener("pointerdown", function (e) {
  down = true; c.setPointerCapture(e.pointerId); setX(e);
});
c.addEventListener("pointermove", function (e) { if (down) setX(e); });
c.addEventListener("pointerup", function () { down = false; });
</script>

Сделай слайдер сравнения до/после: два одинаково спозиционированных изображения, верхнее обрезается clip-path: inset(0 calc(100% - var(--x)) 0 0); вертикальная ручка на left: var(--x). Перетаскивание: pointerdown/move обновляют --x в процентах от ширины контейнера (клампить 2–98%), setPointerCapture для надёжного драга, touch-action:none и cursor:ew-resize. Подписи «до/после» по углам.