Rotary Knob

<div class="nuda-knob">
  <div class="nuda-knob__ring">
    <svg viewBox="0 0 80 80">
      <circle cx="40" cy="40" r="34" fill="none"
              stroke="rgba(255,255,255,.08)" stroke-width="3" />
      <circle cx="40" cy="40" r="34" fill="none" stroke="#e4ff54"
              stroke-width="3" stroke-dasharray="213" stroke-dashoffset="64"
              stroke-linecap="round" transform="rotate(135 40 40)" />
    </svg>
    <div class="nuda-knob__face" style="transform: rotate(135deg)">
      <span class="nuda-knob__pointer"></span>
    </div>
  </div>
  <span class="nuda-knob__val">75%</span>
</div>

// Map vertical drag distance to rotation degrees
const knob = document.querySelector('.nuda-knob__face');
const val  = document.querySelector('.nuda-knob__val');
let dragging = false, startY = 0, startDeg = 135;

knob.addEventListener('pointerdown', (e) => {
  dragging = true;
  startY = e.clientY;
  startDeg = parseFloat(knob.style.transform.match(/-?\d+/)?.[0] ?? '135');
});
window.addEventListener('pointerup', () => (dragging = false));
window.addEventListener('pointermove', (e) => {
  if (!dragging) return;
  const dy = startY - e.clientY;
  const deg = Math.max(-135, Math.min(135, startDeg + dy));
  knob.style.transform = `rotate(${deg}deg)`;
  val.textContent = Math.round(((deg + 135) / 270) * 100) + '%';
});

.nuda-knob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.nuda-knob__ring {
  position: relative;
  width: 80px;
  height: 80px;
}

.nuda-knob__ring svg {
  width: 100%;
  height: 100%;
}

.nuda-knob__face {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,#1a1a20,#0c0c10);
  box-shadow: 0 4px 12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  cursor: grab;
}

.nuda-knob__pointer {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 3px;
  height: 18px;
  background: #e4ff54;
  border-radius: 99px;
  transform: translateX(-50%);
  box-shadow: 0 0 8px #e4ff54;
}

.nuda-knob__val {
  color: #e4ff54;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}