Image Comparison Slider — Free HTML CSS JS Snippet

<div class="scene">
  <p class="label-top">Drag the slider to compare</p>
  <div class="compare" id="compare">
    <div class="side before">
      <div class="img-sim before-sim"></div>
      <span class="tag">Before</span>
    </div>
    <div class="side after" id="after">
      <div class="img-sim after-sim"></div>
      <span class="tag">After</span>
    </div>
    <div class="handle" id="handle">
      <div class="line"></div>
      <div class="knob">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="15 18 9 12 15 6"/></svg>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg>
      </div>
    </div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #0f172a; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; gap: 14px; padding: 20px; }

.label-top { font-size: 12px; color: #475569; }

.compare {
  position: relative; width: min(500px, 90vw); height: 300px;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  user-select: none; cursor: col-resize;
}

.side { position: absolute; inset: 0; overflow: hidden; }
.after { clip-path: inset(0 0 0 50%); }

.img-sim { width: 100%; height: 100%; }
.before-sim { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); }
.after-sim  { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%); }

/* Add some visual content to show difference */
.before-sim::after { content: 'Old Design'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: rgba(255,255,255,0.15); letter-spacing: 2px; }
.after-sim::after  { content: 'New Design'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: rgba(255,255,255,0.25); letter-spacing: 2px; }

.tag { position: absolute; top: 12px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; color: #fff; backdrop-filter: blur(8px); }
.before .tag { left: 12px;  background: rgba(0,0,0,0.4); }
.after  .tag { right: 12px; background: rgba(99,102,241,0.6); }

.handle { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 40px; display: flex; flex-direction: column; align-items: center; }
.line { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.5); }
.knob { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,0.3); gap: 0; z-index: 1; color: #475569; }

const compare = document.getElementById('compare');
const after   = document.getElementById('after');
const handle  = document.getElementById('handle');
let dragging  = false;

function setPos(x) {
  const rect = compare.getBoundingClientRect();
  const pct  = Math.min(95, Math.max(5, ((x - rect.left) / rect.width) * 100));
  after.style.clipPath = `inset(0 0 0 ${pct}%)`;
  handle.style.left = pct + '%';
}

compare.addEventListener('mousedown', e => { dragging = true; setPos(e.clientX); });
compare.addEventListener('touchstart', e => { dragging = true; setPos(e.touches[0].clientX); }, { passive: true });

window.addEventListener('mousemove', e => { if (dragging) setPos(e.clientX); });
window.addEventListener('touchmove', e => { if (dragging) setPos(e.touches[0].clientX); }, { passive: true });

window.addEventListener('mouseup',  () => dragging = false);
window.addEventListener('touchend', () => dragging = false);