Round Slider keeps pixel remaining when slider value goes below 64

Question

My slider code is working good, except it is is blurred drawing unnecessary pixel when value goes below 64.

How to remove these faded dotes ?

$("#handle2").roundSlider({
    sliderType: "min-range",
    radius: "100%",
    showTooltip: true,
    editableTooltip: false,
    width: 16,
    value: 20,
    handleSize: 0,
    handleShape: "square",
    circleShape: "full",
    startAngle:-50,
    endAngle:230,
});

#handle2 .rs-block{
    border: none; 
}

#handle2 .rs-handle:after  {
    display: block;
    content: " ";
    width: 25px;
    position: absolute;
    top: -1px;
    left: 40px;
    border-top: 2px solid black;
}
#handle2 .rs-handle{
    border:none;
}
#handle2 .rs-range-color  {
    background-color: #fff;
    border: 2px solid #000;
    border-bottom:2px solid transparent;
    border-top:2px solid transparent;
}
#handle2 .rs-path-color  {
    background-color: #fff;
    /*border:1px solid red;*/
    border:none;
}
#handle2 .rs-bg-color{
    background-color: #f58b80;
    border: 16px solid #ddd;
}
.rs-bar .rs-seperator{
    display: none;
}
span.rs-tooltip.rs-tooltip-text:after {
    content: ' %';
}

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/roundslider.min.css">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="row" style="height: 100%">
  <div class="col" style="display: flex;justify-content: center;align-items: center;height: 100%">
    <div id="handle2"></div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/roundslider.min.js"></script>

Thanks in advance.

Answer 1

The mentioned problem was resolved with the roundSlider SVG mode, here I have simplified your code with the same behaviour.

$("#handle2").roundSlider({
    sliderType: "min-range",
    radius: "100%",
    showTooltip: true,
    editableTooltip: false,
    value: 20,
    handleSize: 0,
    startAngle:-50,
    endAngle:230,

    svgMode: true,
    width: 2,
    borderWidth: 0,
    rangeColor: "#000",
    // pathColor: "#EEE",
    tooltipFormat: function (e) {
      return e.value + " %";
    }
});

#handle2 .rs-handle:after  {
    display: block;
    content: " ";
    width: 25px;
    position: absolute;
    top: -1px;
    left: 40px;
    border-top: 2px solid black;
}

#handle2:after {
  background-color: #f58b80;
  border: 16px solid #ddd;
  content: " ";
  display: block;
  height: calc(100% - 60px);
  width: calc(100% - 60px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
}

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/roundslider.min.css">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="row" style="height: 100%">
  <div class="col" style="display: flex;justify-content: center;align-items: center;height: 100%">
    <div id="handle2"></div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/roundslider.min.js"></script>