固定多色背景的圆形滑块

Question

我正在尝试使用库 roundSlider.js 创建一个圆形滑块，它在路径中的背景是多色的。我试过使用线性渐变，但效果不好，因为当我开始用 hadler 移动滑块时，背景颜色开始移动，有些消失了。

这是我的代码：

  $(document).ready(function () {

    $("#shape").roundSlider({
    radius: 80,
    width: 8,
    min: 0,
    max: 100,
    handleSize: "+16",
    circleShape: "pie",
    handleShape: "dot",
    sliderType: "min-range",
    startAngle: 315,
    value: 24,
    disabled: false
});
        });

 .rs-range-color {
  background: linear-gradient(to right, yellow 20%, blue 20%, blue 40%, red 40%, red 60%, green 60%, green 80%, brown 80%, brown 100%);
 }

 .rs-path-color {
   /*background-color: #C2E9F7;*/
  background: linear-gradient(to right, yellow 20%, blue 20%, blue 40%, red 40%, red 60%, green 60%, green 80%, brown 80%, brown 100%);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
 }

 .rs-handle {
   background-color: #C2E9F7;
   padding: 7px;
   border: 2px solid #C2E9F7;
 }

 .rs-handle.rs-focus {
   border-color: #33B5E5;
 }

 .rs-handle:after {
   border-color: #33B5E5;
   background-color: #33B5E5;
 }

 .rs-border {
   border-color: transparent;
 }

 .rs-tooltip-text {
   font-family: Roboto, sans-serif;
   font-size: 20px;
   border-radius: 7px;
   transition: background 0.02s ease-in-out;
   color: #33B5E5;
 }

 .rs-tooltip-text:before {
   position: absolute;
   left: -10px;
   top: -18px;
   content: 'DISCOUNT';
   font-size: 12px;
 }

 .rs-tooltip-text:after {
   position: absolute;
   left: 10px;
   top: 48px;
   content: '';
   font-size: 12px;
 }


.container{
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Roboto, sans-serif;
  padding: 20px;
  border: 1px solid;
}

/* Solution for inner circle with shadow */
#shape:after {
  content: " ";
  display: block;
  height: calc(100% - 40px); /* here 40 is the gap between the outer and inner circle */
  width: calc(100% - 40px);
  position: absolute;
  top: 20px;  /* divide the gap value by 2 */
  left: 20px;
  z-index: 9; /* tooltip z-index is 10, so we put less than that value */
  border-radius: 1000px;
  box-shadow: 0 0 10px -2px;
}

/* Solution for bottom triangle out issue */
#shape .rs-overlay {
    height: calc(50% + 5px);
    width: calc(50% + 5px);
    top: -5px;
    left: -5px;
    border-radius: 1000px 0 0 0;
}

<!DOCTYPE html>
<html>
<head>
    <title>RoundSlider - A sample testing</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/round-slider@1.4.1/dist/roundslider.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/round-slider@1.4.1/dist/roundslider.min.js"></script>
</head>
<body style="padding: 10px 0 0 20px; font-family: monospace;">

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

当您运行上面的代码时，您可以看到路径的背景颜色随着我移动处理程序而移动，这就是问题所在。我希望背景保持固定。换句话说，我希望背景路径为具有 3 种或更多颜色的渐变，并且该背景覆盖 100% 的滑块。我不希望颜色移动或被移除以为其他颜色让路。

Answer 1

在 roundSlider 中，svgMode 可用，其中滑块由 SVG 元素构成。因此，您可以使用它来将 SVG 渐变应用于范围和路径元素。而且这里这些元素都是单个元素，所以你不会遇到这个问题。

这里我根据你的场景更新了demo，查看下方：

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

在这个演示中我没有设置 pathColor 因为如果 rangeColor 和路径颜色相同那么你不会发现任何差异。

此外，由于这只是默认的 SVG 渐变，因此您可以根据您的要求修改此 SVG 线性渐变。

编辑 1：

根据您的意见，您需要使用圆锥渐变。在 SVG 中，没有明确的锥形渐变选项，但您仍然可以找到实现它的方法。

或者我使用 CSS 圆锥梯度来实现。查看以下演示：

https://jsfiddle.net/soundar24/6se2tmp9/2/
我还做了一个解决方法，在 roundSlider 路径上创建 SVG 范围段。这也类似于您的要求。查看以下演示：

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

固定多色背景的圆形滑块

Round Slider with multicolor background fixed

html

javascript

css

jquery

round-slider

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

编辑 1：

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

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