<div class="slider__data"><svg height="400" width="400">
    <g class="sliderSingle" data-slider="0" transform="rotate(-160,200,200)" rad="100">
      <path class="sliderSinglePath" d="M 276.6044443118978 135.72123903134604 A 100 100 0 1 0 300 200" stroke-dasharray="10 1.8550666173199746" style="stroke: rgb(216, 216, 216); stroke-width: 6; fill: none;"></path>
      <path class="sliderSinglePathActive" d="M 165.38829429225075 106.18086640775158 A 100 100 0 1 0 300 200" stroke-dasharray="10 1.8550666173199746" style="stroke: rgb(253, 203, 110); stroke-width: 6; fill: none;"></path>
      <circle class="sliderHandle" cx="165.38829429225075" cy="106.18086640775158" style="stroke: rgb(136, 136, 136);"></circle>
            <circle class="sliderDots" cx="165.38829429225075" cy="106.18086640775158" r="4"  style="stroke: rgb(136, 136, 136);"></circle>

    </g><text class="sliderValue" x="100" y="200">80</text>
  </svg></div>

.sliderHandle {
  fill: transparent;
  r: 10px;
  stroke-width: 1px;
  backdrop-filter: blur(4px);
}