1

我正在尝试使用 librery 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% 的滑块。我不希望颜色移动或被移除来为其他人让路。

4

1 回答 1

2

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

在这里，我根据您的情况更新了演示，请检查以下内容：

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

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

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

编辑1：

根据您的评论，您需要使用圆锥渐变。在 SVG 中，没有明确的圆锥渐变选项，但您仍然可以找到实现该目标的方法。

  1. 或者，我使用了 CSS 圆锥渐变来实现这一点。检查以下演示：

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

  2. 我还做了一个解决方法来在 roundSlider 路径上创建 SVG 范围段。这也与您的要求相似。检查以下演示：

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

于 2020-03-31T21:44:41.853 回答