Нужно доработать свгшку

Нужно сделать как на картинке ниже, палочку которая будет идти перед градиентом при движении ползунка. Меня хватило только на свг. Код:

function handleInputChange(range, percentageSVG, svg1, svg2, circle) {

  let a = range.value - 393;

  let b = a / 3.93;

  circle.style.strokeDasharray = range.value;

  percentageSVG.innerHTML = b.toFixed() + '%';

  console.log(range.value);

  if (range.value > 396 && range.value < 590) {

    svg1.style.opacity = '1';

    svg2.style.opacity = '0';

  } else if (range.value > 590) {

    svg1.style.opacity = '0';

    svg2.style.opacity = '1';

  } else {

    svg1.style.opacity = '0';

    svg2.style.opacity = '0';

  }

}

              <div class="dashboard_item">

                <div class="dashboard_item-top">

                  <img src="./img/currency/btc.svg">

                  <p>Bitcoin (BTC)</p>

                </div>

                <div class="dashboard_item-percents">

                  <span>0%</span>

                  <span>100%</span>

                </div>

                <input type="range" min="394" max="786" value="0" id="han">

                <div class="dashboard_item-svg--cont">

                  <svg class="semicircle">

                    <defs>

                      <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">

                        <stop offset="1.01%" style="stop-color:#8c01fa" />

                        <stop offset="100%" style="stop-color:#19fb9b" />

                      </linearGradient>

                    </defs>

                    <g fill="none" stroke="#2B2B36">

                      <circle cx="150" cy="150" r="125" stroke-width="50"></circle>

                      <circle cx="150" cy="151" r="125" stroke-width="50" id="circle" stroke="url(#gradient)"></circle>

                      <text class="percentage-svg" x="150" y="110" text-anchor="middle" stroke="none" fill="#FFF">0

                        %</text>

                      <text class="gpu" x="150" y="140" text-anchor="middle" stroke="none" fill="#FFF">GPU Used</text>

                    </g>

                  </svg>

                </div>

                <p class="dashboard_item--currency-value">0.0000000148 BTC</p>

                <img class="dashboard_item-bottom--svg1" src="./img/cabinet/group24.svg">

                <img class="dashboard_item-bottom--svg2" src="./img/cabinet/group25.svg">

              </div>