javascript - 当滑块值低于 64 时，圆形滑块保持像素剩余

Question

我的滑块代码运行良好，除了当值低于 64 时模糊绘制不必要的像素。

如何去除这些褪色的宠儿？

$("#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/round-slider@1.6.0/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/round-slider@1.6.0/dist/roundslider.min.js"></script>

提前致谢。

Answer 1

上述问题已通过 roundSlider SVG 模式解决，在这里我用相同的行为简化了您的代码。

$("#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/round-slider@1.6.0/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/round-slider@1.6.0/dist/roundslider.min.js"></script>