Drag-to-Resize Panels — Free HTML CSS JS Snippet

<div class="demo">
  <div class="split">
    <div class="pane left">
      <span class="pane-label">Editor</span>
      <span class="pane-pct">50%</span>
    </div>
    <div class="divider" role="separator" aria-orientation="vertical" tabindex="0">
      <span class="grip"></span>
    </div>
    <div class="pane right">
      <span class="pane-label">Preview</span>
      <span class="pane-pct">50%</span>
    </div>
  </div>
  <p class="hint">Drag the divider to resize · double-click it to reset to 50 / 50</p>
</div>

.demo {
  font-family: 'Segoe UI', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  background: #f1f5f9;
}
.split {
  display: flex;
  height: 220px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #fff;
  user-select: none;
}
.pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
}
.pane.left {
  width: 50%;
  background: #eef2ff;
}
.pane.right {
  flex: 1;
  background: #ecfeff;
}
.pane-label {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}
.pane-pct {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: #64748b;
  background: rgba(255,255,255,0.7);
  padding: 2px 10px;
  border-radius: 999px;
}
.divider {
  width: 14px;
  flex-shrink: 0;
  background: #f8fafc;
  border-left: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  touch-action: none;
}
.divider:hover, .divider:focus-visible { background: #e0e7ff; outline: none; }
.divider.dragging { background: #c7d2fe; }
.grip {
  width: 4px;
  height: 36px;
  border-radius: 999px;
  background: #cbd5e1;
}
.divider:hover .grip, .divider.dragging .grip { background: #6366f1; }
.hint {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
}

const split = document.querySelector('.split');
const divider = document.querySelector('.divider');
const left = document.querySelector('.pane.left');
const leftPct = left.querySelector('.pane-pct');
const rightPct = document.querySelector('.pane.right .pane-pct');

const MIN_PCT = 18;
let dragging = false;

function setSplit(pct) {
  const clamped = Math.min(100 - MIN_PCT, Math.max(MIN_PCT, pct));
  left.style.width = clamped + '%';
  leftPct.textContent = Math.round(clamped) + '%';
  rightPct.textContent = Math.round(100 - clamped) + '%';
}

function pointerX(e) {
  return e.touches ? e.touches[0].clientX : e.clientX;
}

function onMove(e) {
  if (!dragging) return;
  const rect = split.getBoundingClientRect();
  const pct = ((pointerX(e) - rect.left) / rect.width) * 100;
  setSplit(pct);
}

function startDrag(e) {
  dragging = true;
  divider.classList.add('dragging');
  e.preventDefault();
}
function endDrag() {
  dragging = false;
  divider.classList.remove('dragging');
}

divider.addEventListener('mousedown', startDrag);
divider.addEventListener('touchstart', startDrag, { passive: false });
window.addEventListener('mousemove', onMove);
window.addEventListener('touchmove', onMove, { passive: false });
window.addEventListener('mouseup', endDrag);
window.addEventListener('touchend', endDrag);

divider.addEventListener('dblclick', () => setSplit(50));
divider.addEventListener('keydown', (e) => {
  const current = parseFloat(left.style.width) || 50;
  if (e.key === 'ArrowLeft') setSplit(current - 4);
  if (e.key === 'ArrowRight') setSplit(current + 4);
});

setSplit(50);