Plan Comparison Slider — Drag to Reveal Basic vs Pro Plan Features

<div class="demo">
  <div class="compare" id="compare">
    <div class="side side-a">
      <span class="side-label">Basic</span>
      <ul class="feat-list">
        <li>5 projects</li>
        <li>2 team seats</li>
        <li>Community support</li>
        <li>1 GB storage</li>
        <li>Basic analytics</li>
        <li class="muted">✕ Priority support</li>
        <li class="muted">✕ Custom domains</li>
        <li class="muted">✕ Audit logs</li>
      </ul>
    </div>
    <div class="side side-b">
      <span class="side-label">Pro</span>
      <ul class="feat-list">
        <li>Unlimited projects</li>
        <li>Unlimited seats</li>
        <li>Priority support</li>
        <li>100 GB storage</li>
        <li>Advanced analytics</li>
        <li>✓ Priority support</li>
        <li>✓ Custom domains</li>
        <li>✓ Audit logs</li>
      </ul>
    </div>
    <div class="handle" id="handle" role="slider" tabindex="0" aria-label="Compare Basic and Pro plans" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
      <div class="handle-line"></div>
      <div class="handle-grip">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M8 6 3 12l5 6M16 6l5 6-5 6"/></svg>
      </div>
    </div>
    <div class="tag tag-a">BASIC</div>
    <div class="tag tag-b">PRO</div>
  </div>
  <p class="hint">Drag the handle, or use ← → keys when focused</p>
</div>

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

.compare { position: relative; width: 460px; max-width: 100%; height: 340px; border-radius: 16px; overflow: hidden; border: 1px solid #e2e8f0; box-shadow: 0 8px 24px rgba(15,23,42,0.06); user-select: none; }

.side { position: absolute; inset: 0; padding: 46px 24px 24px; }
.side-a { background: #f1f5f9; }
.side-b { background: #0f172a; clip-path: inset(0 0 0 50%); transition: clip-path 0.05s linear; }
.side-b .feat-list li { color: #cbd5e1; }
.side-b .feat-list li::before { color: #34d399; }
.side-b .side-label { color: #f1f5f9; }

.side-label { display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #334155; margin-bottom: 16px; }

.feat-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.feat-list li { font-size: 13.5px; font-weight: 600; color: #334155; padding-left: 22px; position: relative; }
.feat-list li::before { content: '✓'; position: absolute; left: 0; color: #059669; font-weight: 800; }
.feat-list li.muted { color: #94a3b8; }
.feat-list li.muted::before { content: '✕'; color: #cbd5e1; }

.handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 40px; margin-left: -20px; display: flex; align-items: center; justify-content: center; cursor: ew-resize; touch-action: none; }
.handle-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(255,255,255,0.9); box-shadow: 0 0 0 1px rgba(15,23,42,0.15); transform: translateX(-1px); }
.handle-grip { position: relative; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #0f172a; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(15,23,42,0.25); transition: transform 0.15s ease; }
.handle:hover .handle-grip, .handle:focus-visible .handle-grip { transform: scale(1.08); }
.handle:focus-visible { outline: none; }
.handle:focus-visible .handle-grip { box-shadow: 0 0 0 3px #6366f1, 0 4px 14px rgba(15,23,42,0.25); }

.tag { position: absolute; top: 16px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; padding: 4px 9px; border-radius: 6px; pointer-events: none; }
.tag-a { left: 24px; background: #e2e8f0; color: #475569; }
.tag-b { right: 24px; background: rgba(255,255,255,0.12); color: #f1f5f9; }

.hint { font-size: 12px; color: #94a3b8; }

const compare = document.getElementById('compare');
const handle = document.getElementById('handle');
const sideB = compare.querySelector('.side-b');

function setPos(pct) {
  pct = Math.max(4, Math.min(96, pct));
  sideB.style.clipPath = `inset(0 0 0 ${pct}%)`;
  handle.style.left = pct + '%';
  handle.setAttribute('aria-valuenow', Math.round(pct));
}

function pctFromClientX(clientX) {
  const rect = compare.getBoundingClientRect();
  return ((clientX - rect.left) / rect.width) * 100;
}

let dragging = false;

handle.addEventListener('pointerdown', (e) => {
  dragging = true;
  handle.setPointerCapture(e.pointerId);
});
handle.addEventListener('pointermove', (e) => {
  if (!dragging) return;
  setPos(pctFromClientX(e.clientX));
});
handle.addEventListener('pointerup', () => { dragging = false; });
handle.addEventListener('pointercancel', () => { dragging = false; });

handle.addEventListener('keydown', (e) => {
  const current = parseFloat(handle.style.left) || 50;
  if (e.key === 'ArrowLeft') { setPos(current - 5); e.preventDefault(); }
  if (e.key === 'ArrowRight') { setPos(current + 5); e.preventDefault(); }
});

setPos(50);