Before / After Image Slider

Orientation

Slider

Labels

Live Preview (drag the slider)

<!-- Before/After Image Slider -->
<style>
.sqs-ba{position:relative;overflow:hidden;border-radius:8px;max-width:800px;margin:0 auto;cursor:col-resize;user-select:none;-webkit-user-select:none;aspect-ratio:16/10;}
.sqs-ba img{display:block;width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;}
.sqs-ba-before{clip-path:inset(0 calc(100% - 50%) 0 0);z-index:1;}
.sqs-ba-after{z-index:0;}
.sqs-ba-line{position:absolute;z-index:3;background:#ffffff;width:3px;top:0;bottom:0;left:50%;transform:translateX(-50%);box-shadow:0 0 6px rgba(0,0,0,0.3);}
.sqs-ba-handle{position:absolute;z-index:4;width:40px;height:40px;background:#ffffff;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,0.3);left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;}
.sqs-ba-handle svg{width:20px;height:20px;fill:none;stroke:#333;stroke-width:2.5;stroke-linecap:round;}
.sqs-ba-label{position:absolute;z-index:2;padding:6px 14px;background:rgba(0,0,0,0.6);color:#fff;font-family:sans-serif;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;border-radius:4px;pointer-events:none;}
.sqs-ba-label-before{top:16px;left:16px;}
.sqs-ba-label-after{top:16px;right:16px;}
</style>

<div class="sqs-ba" id="sqsBeforeAfter">
  <!-- Replace these src URLs with your own images -->
  <img class="sqs-ba-before" src="YOUR_BEFORE_IMAGE_URL" alt="Before" />
  <img class="sqs-ba-after" src="YOUR_AFTER_IMAGE_URL" alt="After" />
  <div class="sqs-ba-line"></div>
  <div class="sqs-ba-handle">
    <svg viewBox="0 0 24 24"><polyline points="8,4 4,12 8,20"/><polyline points="16,4 20,12 16,20"/></svg>
  </div>
  <span class="sqs-ba-label sqs-ba-label-before">Before</span>
  <span class="sqs-ba-label sqs-ba-label-after">After</span>
</div>

<script>
(function(){
  var ba = document.getElementById("sqsBeforeAfter");
  var before = ba.querySelector(".sqs-ba-before");
  var line = ba.querySelector(".sqs-ba-line");
  var handle = ba.querySelector(".sqs-ba-handle");
  var isH = true;
  function move(pct){
    pct = Math.max(0,Math.min(100,pct));
    if(isH){
      before.style.clipPath = "inset(0 " + (100-pct) + "% 0 0)";
      line.style.left = pct + "%";
      handle.style.left = pct + "%";
    } else {
      before.style.clipPath = "inset(0 0 " + (100-pct) + "% 0)";
      line.style.top = pct + "%";
      handle.style.top = pct + "%";
    }
  }
  function getPos(e){
    var r = ba.getBoundingClientRect();
    var c = e.touches ? e.touches[0] : e;
    return isH ? ((c.clientX - r.left) / r.width) * 100 : ((c.clientY - r.top) / r.height) * 100;
  }
  var dragging = false;
  ba.addEventListener("mousedown",function(e){dragging=true;move(getPos(e));});
  ba.addEventListener("touchstart",function(e){dragging=true;move(getPos(e));},{passive:true});
  window.addEventListener("mousemove",function(e){if(dragging)move(getPos(e));});
  window.addEventListener("touchmove",function(e){if(dragging){e.preventDefault();move(getPos(e));}},{passive:false});
  window.addEventListener("mouseup",function(){dragging=false;});
  window.addEventListener("touchend",function(){dragging=false;});
})();
</script>