Video Scrub Comparison Slider — HTML CSS JS Snippet

<div class="vsc-wrap">
  <div class="vsc-frame" id="vscFrame">
    <div class="vsc-layer vsc-layer-before">
      <div class="vsc-fake-video vsc-fake-a">
        <div class="vsc-scan"></div>
        <span class="vsc-tag">RAW</span>
      </div>
    </div>
    <div class="vsc-layer vsc-layer-after" id="vscAfter">
      <div class="vsc-fake-video vsc-fake-b">
        <div class="vsc-scan"></div>
        <span class="vsc-tag">GRADED</span>
      </div>
    </div>
    <div class="vsc-handle" id="vscHandle">
      <div class="vsc-handle-line"></div>
      <div class="vsc-handle-grip">⟺</div>
    </div>
  </div>
  <div class="vsc-scrubber">
    <button class="vsc-play" id="vscPlay" aria-label="Play/pause">▶</button>
    <div class="vsc-bar" id="vscBar"><div class="vsc-bar-fill" id="vscBarFill"></div></div>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0b0e14;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.vsc-wrap{width:100%;max-width:480px}
.vsc-frame{position:relative;width:100%;height:270px;border-radius:14px;overflow:hidden;box-shadow:0 16px 36px rgba(0,0,0,.5);cursor:ew-resize;touch-action:none}
.vsc-layer{position:absolute;inset:0}
.vsc-layer-after{overflow:hidden;width:50%}
.vsc-fake-video{position:relative;width:100%;height:100%;overflow:hidden}
.vsc-fake-a{background:linear-gradient(120deg,#3a3f4b,#20232b)}
.vsc-fake-b{background:linear-gradient(120deg,#0ea5e9,#22d3ee)}
.vsc-layer-after .vsc-fake-video{width:200%}
.vsc-scan{position:absolute;top:0;bottom:0;width:60px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);animation:vscScan 3s linear infinite}
@keyframes vscScan{from{left:-60px}to{left:100%}}
.vsc-tag{position:absolute;bottom:12px;left:14px;font:800 10.5px system-ui,sans-serif;color:#fff;background:rgba(0,0,0,.45);padding:3px 9px;border-radius:20px;letter-spacing:.04em}
.vsc-handle{position:absolute;top:0;bottom:0;left:50%;width:0;transform:translateX(-50%);z-index:3}
.vsc-handle-line{position:absolute;top:0;bottom:0;left:0;width:2px;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.4)}
.vsc-handle-grip{position:absolute;top:50%;left:0;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.vsc-scrubber{display:flex;align-items:center;gap:12px;margin-top:14px}
.vsc-play{width:34px;height:34px;border-radius:50%;border:none;background:#1e293b;color:#fff;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vsc-bar{position:relative;flex:1;height:4px;border-radius:4px;background:#2a3348;cursor:pointer}
.vsc-bar-fill{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:4px;background:#0ea5e9}

var frame = document.getElementById('vscFrame');
var handle = document.getElementById('vscHandle');
var after = document.getElementById('vscAfter');
var playBtn = document.getElementById('vscPlay');
var bar = document.getElementById('vscBar');
var barFill = document.getElementById('vscBarFill');

var splitPct = 50;
var playing = false;
var playbackPct = 0;
var rafId = null;
var lastT = null;
var DURATION = 6000;

function renderSplit() {
  after.style.width = splitPct + '%';
  handle.style.left = splitPct + '%';
}

function setSplitFromClientX(clientX) {
  var rect = frame.getBoundingClientRect();
  var x = Math.max(0, Math.min(rect.width, clientX - rect.left));
  splitPct = (x / rect.width) * 100;
  renderSplit();
}

var dragging = false;
frame.addEventListener('pointerdown', function (e) { dragging = true; setSplitFromClientX(e.clientX); });
window.addEventListener('pointermove', function (e) { if (dragging) setSplitFromClientX(e.clientX); });
window.addEventListener('pointerup', function () { dragging = false; });
frame.addEventListener('touchstart', function (e) { dragging = true; setSplitFromClientX(e.touches[0].clientX); }, { passive: true });
window.addEventListener('touchmove', function (e) { if (dragging) setSplitFromClientX(e.touches[0].clientX); }, { passive: true });
window.addEventListener('touchend', function () { dragging = false; });

function renderPlayback() {
  barFill.style.width = playbackPct + '%';
}

function tick(now) {
  if (!playing) return;
  if (lastT === null) lastT = now;
  var dt = now - lastT;
  lastT = now;
  playbackPct += (dt / DURATION) * 100;
  if (playbackPct >= 100) { playbackPct = 100; playing = false; playBtn.textContent = '▶'; }
  renderPlayback();
  if (playing) rafId = requestAnimationFrame(tick);
}

playBtn.addEventListener('click', function () {
  playing = !playing;
  playBtn.textContent = playing ? '❚❚' : '▶';
  if (playing) { lastT = null; rafId = requestAnimationFrame(tick); }
});

bar.addEventListener('click', function (e) {
  var rect = bar.getBoundingClientRect();
  playbackPct = ((e.clientX - rect.left) / rect.width) * 100;
  renderPlayback();
});

document.addEventListener('keydown', function (e) {
  if (e.key === 'ArrowRight') { splitPct = Math.min(100, splitPct + 3); renderSplit(); }
  else if (e.key === 'ArrowLeft') { splitPct = Math.max(0, splitPct - 3); renderSplit(); }
});

renderSplit();
renderPlayback();