CODEWITHSUNDEEP
javascriptjqueryslidergaugeround-slider
Niklesh Raut
Niklesh Raut

Reputation: 34914

Round Slider keeps pixel remaining when slider value goes below 64

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.

Upvotes: 1

Views: 318

Answers (1)

Soundar
Soundar

Reputation: 2589

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>

Upvotes: 1

Related Questions