roundSlider - SVG Custom range segments on Slider path

roundSlider - SVG Custom range segments on Slider path

by Soundar Pandian

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/roundslider.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/roundslider.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/roundslider.min.js"></script>
<h2><a target="_blank" href="https://roundsliderui.com/">roundSlider - v1.4.1</a> [SVG Custom range segments on Slider path]</h2>

<div class="container">
  <div class="control">
    <div id="shape"></div>
  </div>
</div>

JavaScript

// ####### ---------- Workaround for custom range segments ---------- ####### //
var fn1 = $.fn.roundSlider.prototype._setProperties;
$.fn.roundSlider.prototype._setProperties = function () {
  fn1.apply(this);
  var o = this.options, r = o.radius, r1 = r - (o.width / 2) - o.borderWidth;
  var svgElement = this.svgContainer.children();

  for(var i = 0; i < o.ranges.length; i++) {
    var obj = o.ranges[i];
    var startPoint = this._valueToAngle(obj.start),
        endPoint = this._valueToAngle(obj.end);

    var path = this.$createSVG("path");
    var d = this.$drawPath(r, r1, startPoint, endPoint);
    var attr = { 
    	"d": d, "stroke-width": o.width, 
      "stroke": obj.bgcolor, "fill": "transparent"
    };
    this.$setAttribute(path, attr);
    svgElement.append(path);
  }
}
// ####### ---------- ---------- ####### //
            
$("#shape").roundSlider({
  radius: 140,
  width: 24,
  min: 0,
  max: 100,
  handleSize: "+8",
  // circleShape: "pie",
  handleShape: "dot",
  sliderType: "min-range",
  // startAngle: 315,
  value: 24,
  disabled: false,
  svgMode: true,
  // pathColor: "url(#grad1)",
  // rangeColor: "url(#grad1)",
  pathColor: "transparent",
  rangeColor: "transparent",
  // borderWidth: 0,

  ranges: [
    {start: 0, end: 20, bgcolor: "yellow"},
    {start: 20, end: 40, bgcolor: "blue"},
    {start: 40, end: 60, bgcolor: "red"},
    {start: 60, end: 80, bgcolor: "green"},
    {start: 80, end: 100, bgcolor: "brown"}
  ]
});