Before / After Comparison

<div class="ba" id="ba">
  <div class="ba-after"><span>AFTER</span></div>
  <div class="ba-before" id="before"><span>BEFORE</span></div>
  <div class="ba-handle" id="handle">
    <svg viewBox="0 0 24 24" width="18" height="18"><path fill="none" stroke="#1a1f36" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M9 7l-5 5 5 5M15 7l5 5-5 5"/></svg>
  </div>
</div>

*{box-sizing:border-box}
.ba{position:relative;width:420px;max-width:100%;height:260px;border-radius:16px;overflow:hidden;user-select:none;font-family:system-ui,sans-serif;cursor:ew-resize;box-shadow:0 14px 38px rgba(20,25,50,.16)}
.ba-after,.ba-before{position:absolute;inset:0;display:grid;place-items:center}
.ba-after span,.ba-before span{font-size:30px;font-weight:800;color:#fff;letter-spacing:1px;text-shadow:0 2px 10px rgba(0,0,0,.2)}
.ba-after{background:linear-gradient(135deg,#5b6cff,#00d4ff)}
.ba-before{background:linear-gradient(135deg,#ff7a18,#ff477e);width:50%;border-right:3px solid #fff;overflow:hidden}
.ba-before span{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);pointer-events:none;display:flex;align-items:center;justify-content:center}
.ba-handle svg{width:40px;height:40px;padding:11px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25)}

var ba=document.getElementById('ba'),before=document.getElementById('before'),handle=document.getElementById('handle'),dragging=false;
function setPos(x){var r=ba.getBoundingClientRect();var p=Math.max(0,Math.min(1,(x-r.left)/r.width));before.style.width=(p*100)+'%';handle.style.left=(p*100)+'%';}
ba.addEventListener('mousedown',function(e){dragging=true;setPos(e.clientX)});
window.addEventListener('mousemove',function(e){if(dragging)setPos(e.clientX)});
window.addEventListener('mouseup',function(){dragging=false});
ba.addEventListener('touchstart',function(e){setPos(e.touches[0].clientX)},{passive:true});
ba.addEventListener('touchmove',function(e){setPos(e.touches[0].clientX)},{passive:true});