demo/knob/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
    <title>Knob.js Demo - Knob</title>
    <link href="./style.scss" type="text/scss" rel="stylesheet" />
    <script
      src="https://cdn.jsdelivr.net/gh/lf2com/browser-utils@latest/dist/scriptLoader.js"
      module="
        ~/scss;
        ../utils/knob
      "
    ></script>
  </head>
  <body>
    <div id="degree" class="row">
      <span class="name">Degree:</span>
      <input type="number" value="0" />
    </div>
    <div id="min" class="row">
      <input type="checkbox" id="min-checkbox"
      /><label for="min-checkbox"
      ><span class="name">Min:</span
      ></label>
      <input type="number" value="-60" />
    </div>
    <div id="max" class="row">
      <input type="checkbox" id="max-checkbox"
      /><label for="max-checkbox"
      ><span class="name">Max:</span
      ></label>
      <input type="number" value="120" />
    </div>
    <div id="style" class="row">
      <span class="name">Style:</span>
      <input type="radio" name="style" id="dot" value="dot"
      /><label for="dot">dot</label>
      <input type="radio" name="style" id="triangle" value="triangle"
      /><label for="triangle">triangle</label>
      <input type="radio" name="style" id="line" value="line"
      /><label for="line">line</label>
    </div>
    <div class="row">
      <knob-dot id="knob"></knob-dot>
    </div>
  </body>
  <script src="./main.js"></script>
</html>