Volume-Knob

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Volume Knob with Corrected Scale</title>
  <style>
    body {
      background: #111;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .tick {
      position: absolute;
      width: 2px;
      height: 10px;
      background: #ccc;
      top: 60px;
      left: 50%;
      transform-origin: bottom center;
    }

    .tick-label {
      position: absolute;
      color: #aaa;
      font-size: 9px;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }
  </style>
</head>
<body>
  <script>
    function createVolumeKnob({ initialVolume = 0.5, onChange = () => {} } = {}) {
      const container = document.createElement("div");
      const scale = document.createElement("div");
      const knob = document.createElement("div");
      const indicator = document.createElement("div");
      const shine = document.createElement("div");

      container.style.position = "relative";
      container.style.width = "140px";
      container.style.height = "140px";
      scale.style.position = "absolute";
      scale.style.top = "0";
      scale.style.left = "0";
      scale.style.width = "100%";
      scale.style.height = "100%";
      scale.style.zIndex = "1";

      knob.style.position = "absolute";
      knob.style.top = "20px";
      knob.style.left = "20px";
      knob.style.width = "100px";
      knob.style.height = "100px";
      knob.style.borderRadius = "50%";
      knob.style.background = `
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 60%),
        repeating-linear-gradient(90deg, #444 0px, #333 1px, #222 2px),
        linear-gradient(145deg, #666, #111)
      `;
      knob.style.backgroundBlendMode = "overlay";
      knob.style.border = "2px solid #888";
      knob.style.cursor = "pointer";
      knob.style.transition = "box-shadow 0.1s linear,...