在roundSlider中，**svgMode**在滑动条由SVG元素构成的情况下可用。因此，使用它可以将SVG渐变应用于range和path元素。此外，这里这些元素是单个元素，因此您不会遇到此问题。
在这里，我已经根据您的场景更新了演示，请检查以下内容：

https://jsfiddle.net/soundar24/6se2tmp9/

在这个演示中，我没有设置pathColor，因为如果rangeColor和路径颜色都相同，那么你不会发现任何差异。
此外，由于这只是默认的SVG渐变，因此可以根据您的需求修改此SVG线性渐变。

编辑1：

根据你的评论，那么你需要使用圆锥曲线渐变。在SVG中没有明确的圆锥曲线渐变选项，但你仍然可以找到实现它的方法。
1.或者，我使用CSS圆锥渐变来实现这一点。查看下面的演示：

https://jsfiddle.net/soundar24/6se2tmp9/2/

1.另外，我还做了一个变通方案，在roundSlider路径上创建SVG范围段。这也与您的要求相似。请查看下面的演示：

https://jsfiddle.net/soundar24/8pgo9ce7/

$(document).ready(function () {
            $.fn.roundSlider.prototype._invertRange = true;
            // this is core functionality to generate the numbers
            $.fn.roundSlider.prototype.defaults.create = function () {
                var o = this.options, tickInterval = 20;
                for (var i = o.min; i <= o.max; i += tickInterval) {
                    var angle = this._valueToAngle(i);
                    var numberTag = this._addSeperator(angle, "rs-custom");
                    var number = numberTag.children();
                    number.clone().css({
                        "width": o.width + this._border(),
                        "margin-top": this._border(true) / -2
                    });
                    number.removeClass().addClass("rs-number").html(i).rsRotate(-angle);
                }
            }
            
            // ####### ---------- 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);
                }
            }
            // ####### ---------- ---------- ####### //
            $("#handle1").roundSlider({
                svgMode: true,
                pathColor: "transparent",
                rangeColor: "transparent",
                sliderType: "min-range",
                editableTooltip: false,
                radius: 105,
                width: 16,
                value: 75,
                handleShape: "square",
                handleSize: 0,
                circleShape: "pie",
                startAngle: 315,
                min: 0,
                max: 100,
                step: 5,
                disabled: false,
                ranges: [
                    { start: 0, end: 20, bgcolor: "#D91907"},
                    { start: 20, end: 40, bgcolor: "#F58B00" },
                    { start: 40, end: 60, bgcolor: "#FFBB00" },
                    { start: 60, end: 80, bgcolor: "#6FA600" },
                    { start: 80, end: 100, bgcolor: "#009619" }
                ]
            });
        });

body{
            padding:50px;
            }
        .rs-bg-color {
            background-color: #fff;
        }
        .rs-block.rs-outer.rs-border.rs-split .rs-path.rs-transition:first-child {
            background: #ff4434 !important;
        }
        .rs-block.rs-outer.rs-border.rs-split .rs-path.rs-transition:nth-child(2) {
            background: #ff9000 !important;
        }
        .rs-block.rs-outer.rs-border.rs-split .rs-path.rs-transition:nth-child(4) {
            background: #00b71c !important;
            z-index: 2 !important;
        }
        #handle1 .rs-handle {
            background-color: transparent;
            border: 8px solid transparent;
            border-right-color: black;
            margin: -6px 0px 0px 14px !important;
            border-width: 6px 104px 6px 4px;
        }
        #handle1 .rs-handle:before {
            display: block;
            content: " ";
            position: absolute;
            height: 22px;
            width: 22px;
            background: black;
            right: -11px;
            bottom: -11px;
            border-radius: 100px;
        }
        #handle1 .rs-tooltip {
            top: 75%;
            font-size: 12px;
        }
        #handle1 .rs-tooltip div {
            text-align: center;
            background: orange;
            color: white;
            border-radius: 4px;
            padding: 1px 5px 1px;
        }
        #handle1 .rs-range-color {
            background-color: #DB5959;
        }
        #handle1 .rs-path-color {
            background-color: #F0C5C5;
        }
        span.rs-number {
            position: absolute;
            top: -8px;
            left: -25px;
            font-size: 15px;
            color: #000;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Fuel</title>
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/roundslider.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/roundslider.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    
</head>
<body>
    <div id="handle1"></div>
</body>
</html>