Multi-Directional 2D Slider — HTML CSS JS Snippet

<div class="mds-wrap">
  <div class="mds-viewport" id="mdsViewport">
    <div class="mds-grid" id="mdsGrid">
      <div class="mds-cell" style="background:linear-gradient(160deg,#6366f1,#4338ca)">1</div>
      <div class="mds-cell" style="background:linear-gradient(160deg,#0ea5e9,#0369a1)">2</div>
      <div class="mds-cell" style="background:linear-gradient(160deg,#ec4899,#9d174d)">3</div>
      <div class="mds-cell" style="background:linear-gradient(160deg,#10b981,#047857)">4</div>
      <div class="mds-cell" style="background:linear-gradient(160deg,#f59e0b,#b45309)">5</div>
      <div class="mds-cell" style="background:linear-gradient(160deg,#8b5cf6,#5b21b6)">6</div>
      <div class="mds-cell" style="background:linear-gradient(160deg,#ef4444,#991b1b)">7</div>
      <div class="mds-cell" style="background:linear-gradient(160deg,#14b8a6,#0f766e)">8</div>
      <div class="mds-cell" style="background:linear-gradient(160deg,#eab308,#854d0e)">9</div>
    </div>
  </div>
  <div class="mds-pad" id="mdsPad">
    <button class="mds-dir mds-up" data-dx="0" data-dy="1" aria-label="Move up">▲</button>
    <button class="mds-dir mds-left" data-dx="1" data-dy="0" aria-label="Move left">◀</button>
    <div class="mds-dot"></div>
    <button class="mds-dir mds-right" data-dx="-1" data-dy="0" aria-label="Move right">▶</button>
    <button class="mds-dir mds-down" data-dx="0" data-dy="-1" aria-label="Move down">▼</button>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0f1117;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px}
.mds-viewport{width:220px;height:220px;overflow:hidden;border-radius:16px;box-shadow:0 16px 36px rgba(0,0,0,.5)}
.mds-grid{display:grid;grid-template-columns:repeat(3,220px);grid-template-rows:repeat(3,220px);width:660px;height:660px;transition:transform .4s cubic-bezier(.4,0,.2,1);touch-action:none;cursor:grab}
.mds-grid.mds-grabbing{cursor:grabbing}
.mds-cell{display:flex;align-items:center;justify-content:center;font-size:60px;font-weight:800;color:rgba(255,255,255,.9)}
.mds-pad{display:grid;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px);gap:4px;place-items:center}
.mds-up{grid-column:2;grid-row:1}
.mds-left{grid-column:1;grid-row:2}
.mds-dot{grid-column:2;grid-row:2;width:8px;height:8px;border-radius:50%;background:#2a3348}
.mds-right{grid-column:3;grid-row:2}
.mds-down{grid-column:2;grid-row:3}
.mds-dir{width:34px;height:34px;border-radius:8px;background:#161c2c;border:1px solid #2a3348;color:#cbd5e1;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.mds-dir:hover{background:#232c42;color:#fff}

var viewport = document.getElementById('mdsViewport');
var grid = document.getElementById('mdsGrid');
var CELL = 220;
var col = 1, row = 1; // start centered on cell "5"
var minCol = 0, maxCol = 2, minRow = 0, maxRow = 2;

function render() {
  grid.style.transform = 'translate(' + (-col * CELL) + 'px, ' + (-row * CELL) + 'px)';
}

function move(dx, dy) {
  col = Math.max(minCol, Math.min(maxCol, col - dx));
  row = Math.max(minRow, Math.min(maxRow, row - dy));
  render();
}

document.querySelectorAll('.mds-dir').forEach(function (btn) {
  btn.addEventListener('click', function () {
    move(parseInt(btn.dataset.dx, 10), parseInt(btn.dataset.dy, 10));
  });
});

// Free drag across both axes, snapping to the nearest cell on release
var dragging = false;
var startX = 0, startY = 0, baseX = 0, baseY = 0;

function currentTranslate() {
  return { x: -col * CELL, y: -row * CELL };
}

function pointerDown(e) {
  dragging = true;
  grid.classList.add('mds-grabbing');
  grid.style.transition = 'none';
  var t = currentTranslate();
  baseX = t.x; baseY = t.y;
  startX = e.touches ? e.touches[0].clientX : e.clientX;
  startY = e.touches ? e.touches[0].clientY : e.clientY;
}

function pointerMoveHandler(e) {
  if (!dragging) return;
  var x = e.touches ? e.touches[0].clientX : e.clientX;
  var y = e.touches ? e.touches[0].clientY : e.clientY;
  var tx = baseX + (x - startX);
  var ty = baseY + (y - startY);
  grid.style.transform = 'translate(' + tx + 'px, ' + ty + 'px)';
}

function pointerUpHandler(e) {
  if (!dragging) return;
  dragging = false;
  grid.classList.remove('mds-grabbing');
  grid.style.transition = '';
  var style = getComputedStyle(grid).transform;
  var matrix = new DOMMatrixReadOnly(style);
  col = Math.max(minCol, Math.min(maxCol, Math.round(-matrix.m41 / CELL)));
  row = Math.max(minRow, Math.min(maxRow, Math.round(-matrix.m42 / CELL)));
  render();
}

viewport.addEventListener('pointerdown', pointerDown);
window.addEventListener('pointermove', pointerMoveHandler);
window.addEventListener('pointerup', pointerUpHandler);
viewport.addEventListener('touchstart', pointerDown, { passive: true });
window.addEventListener('touchmove', pointerMoveHandler, { passive: true });
window.addEventListener('touchend', pointerUpHandler);

document.addEventListener('keydown', function (e) {
  if (e.key === 'ArrowUp') move(0, 1);
  else if (e.key === 'ArrowDown') move(0, -1);
  else if (e.key === 'ArrowLeft') move(1, 0);
  else if (e.key === 'ArrowRight') move(-1, 0);
});

render();