<svg viewBox="-250 -250 500 290" width="300">
  <g class="arrow">
    <path d="M-18,-10 0,-150 18,-10" />
    <circle r="20" />
  </g>

  <g class="scale">
    <circle r="200" fill="none" stroke="#000" stroke-width="20" class="frequency" />
  </g>

  <path d="m-220 0 a120 -120 0 0 1 440 0" fill="none" stroke="blue" stroke-width="0" id="path" />

  <text font-size="20px" x="5">
    <textPath href="#path">20</textPath>
  </text>
  <text font-size="20px" x="80">
    <textPath href="#path">40</textPath>
  </text>
  <text font-size="20px" x="150">
    <textPath href="#path">80</textPath>
  </text>
  <text font-size="20px" x="210">
    <textPath href="#path">100</textPath>
  </text>
  <text font-size="20px" x="285">
    <textPath href="#path">120</textPath>
  </text>
  <text font-size="20px" x="355">
    <textPath href="#path">140</textPath>
  </text>
  <text font-size="20px" x="425">
    <textPath href="#path">160</textPath>
  </text>
  <text font-size="20px" x="500">
    <textPath href="#path">180</textPath>
  </text>
  <text font-size="20px" x="570">
    <textPath href="#path">200</textPath>
  </text>
  <text font-size="20px" x="640">
    <textPath href="#path">220</textPath>
  </text>

  <text id="num" text-anchor="middle" alignment-baseline="central" y="-100" font-size="50">0</text>

</svg>

<br>

<input type="range" min="-100" max="100" value="-100" id="range">
.arrow {
  transform-origin: 0 0px;
  transition: 0.34s ease;
  transform: rotate(-103deg); /* 93 */
}

.frequency {
  stroke-dasharray: 10 55;
  stroke-dashoffset: -54;
}
range.addEventListener("input", function () {
  document.querySelector(".arrow").style.transform = `rotate(${this.value}deg`;
  num.innerHTML = parseInt((230 * (Number(this.value) + 100)) / 180);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.