Rotary Knob Input — Drag Dial HTML CSS JS Snippet

<div class="knob-panel">
  <div class="knob-unit">
    <div class="knob" data-val="65" tabindex="0" role="slider" aria-label="Volume" aria-valuemin="0" aria-valuemax="100" aria-valuenow="65">
      <div class="knob-face">
        <div class="knob-dial"><span class="knob-tick"></span></div>
        <span class="knob-num">65</span>
      </div>
    </div>
    <div class="knob-label">Volume</div>
  </div>

  <div class="knob-unit">
    <div class="knob" data-val="30" tabindex="0" role="slider" aria-label="Reverb" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30">
      <div class="knob-face">
        <div class="knob-dial"><span class="knob-tick"></span></div>
        <span class="knob-num">30</span>
      </div>
    </div>
    <div class="knob-label">Reverb</div>
  </div>

  <div class="knob-unit">
    <div class="knob alt" data-val="80" tabindex="0" role="slider" aria-label="Drive" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80">
      <div class="knob-face">
        <div class="knob-dial"><span class="knob-tick"></span></div>
        <span class="knob-num">80</span>
      </div>
    </div>
    <div class="knob-label">Drive</div>
  </div>
</div>
<p class="knob-hint">Drag up / down, scroll, or focus and use arrow keys</p>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0f172a;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:14px}
.knob-panel{display:flex;gap:34px;background:#1e293b;border:1px solid #334155;border-radius:20px;padding:30px 36px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.knob-unit{display:flex;flex-direction:column;align-items:center;gap:12px}

.knob{--deg:0;--accent:#6366f1;width:92px;height:92px;border-radius:50%;background:conic-gradient(from 225deg,var(--accent) 0 calc(var(--deg)*1deg),#0f172a calc(var(--deg)*1deg) 270deg,transparent 270deg);cursor:ns-resize;position:relative;outline:none;touch-action:none;transition:box-shadow .2s}
.knob.alt{--accent:#f59e0b}
.knob:focus-visible{box-shadow:0 0 0 3px rgba(99,102,241,.5)}
.knob::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(148,163,184,.15)}

.knob-face{position:absolute;inset:9px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#334155,#1e293b);box-shadow:0 4px 10px rgba(0,0,0,.4),inset 0 1px 1px rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center}
.knob-dial{position:absolute;inset:0;transform:rotate(-135deg)}
.knob-tick{position:absolute;left:50%;top:8px;width:4px;height:14px;border-radius:3px;background:var(--accent);transform:translateX(-50%);box-shadow:0 0 8px var(--accent)}
.knob-num{font-size:21px;font-weight:800;color:#f1f5f9;font-variant-numeric:tabular-nums;pointer-events:none}

.knob-label{font-size:12px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em}
.knob-hint{font-size:12px;color:#64748b}

var active = null, startY = 0, startVal = 0;

function setKnob(knob, v) {
  v = Math.max(0, Math.min(100, v));
  knob.dataset.val = v;
  knob.style.setProperty('--deg', v * 2.7);
  knob.setAttribute('aria-valuenow', Math.round(v));
  knob.querySelector('.knob-dial').style.transform = 'rotate(' + (-135 + v * 2.7) + 'deg)';
  knob.querySelector('.knob-num').textContent = Math.round(v);
}

function onDown(e) {
  active = e.currentTarget;
  startY = (e.touches ? e.touches[0].clientY : e.clientY);
  startVal = parseFloat(active.dataset.val);
  if (e.cancelable) e.preventDefault();
}

function onMove(e) {
  if (!active) return;
  var y = (e.touches ? e.touches[0].clientY : e.clientY);
  setKnob(active, startVal + (startY - y) / 2);
}

function onUp() { active = null; }

function onWheel(e) {
  e.preventDefault();
  var knob = e.currentTarget;
  setKnob(knob, parseFloat(knob.dataset.val) + (e.deltaY < 0 ? 2 : -2));
}

function onKey(e) {
  var knob = e.currentTarget;
  var v = parseFloat(knob.dataset.val);
  if (e.key === 'ArrowUp' || e.key === 'ArrowRight') { setKnob(knob, v + 2); e.preventDefault(); }
  else if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') { setKnob(knob, v - 2); e.preventDefault(); }
}

document.querySelectorAll('.knob').forEach(function (knob) {
  setKnob(knob, parseFloat(knob.dataset.val));
  knob.addEventListener('mousedown', onDown);
  knob.addEventListener('touchstart', onDown, { passive: false });
  knob.addEventListener('wheel', onWheel, { passive: false });
  knob.addEventListener('keydown', onKey);
});
window.addEventListener('mousemove', onMove);
window.addEventListener('mouseup', onUp);
window.addEventListener('touchmove', onMove, { passive: false });
window.addEventListener('touchend', onUp);