Roundslider 柔和的颜色变化

Question

我想 soft/smooth 在我的 RoundSlider 的某些值点更改颜色。目前我在值 16、20、25 处有一些硬颜色变化，但看起来不太好。

我试图用 TweenLite 解决这个问题，但遗憾的是我没有成功... 您对我如何解决此问题有任何其他建议吗？

我可以从蓝色到红色的值 0 - 30 进行颜色转换，因为滑块应该是恒温器的输入元素。

谢谢！

$("#SetRoomTmpSlider").roundSlider({
        sliderType: "min-range",
        circleShape: "half-top",
        startAngle: "315",
        lineCap: "round",
        radius: 130,
        width: 20,
    
        min: 5,
        max: 30,
        
        svgMode: true,
        pathColor: "#eee",
        borderWidth: 0,
        
        startValue: 0,
        
        valueChange: function (e) {


          var color = "#0B77DD";
          var logo = document.getElementById("SetRoomTmpSlider");

          if(e.value >= 25)
          {

            color = "#ec2906";
            
          }
          else if (e.value >= 20)
          {
            color = "#EC7906";
          }
          else if (e.value >= 16)
          {
            color = "#ECB406";
          }



          $("#SetRoomTmpSlider").roundSlider({ "rangeColor": color, "tooltipColor": color });
        }
    });
    
    var sliderObj = $("#SetRoomTmpSlider").data("roundSlider");
    sliderObj.setValue(30);

#SetRoomTmpSlider .rs-handle {
  background-color: #f3f3f3;
  box-shadow: 0px 0px 4px 0px #000;
}
#SetRoomTmpSlider .rs-tooltip-text {
  font-size: 25px;
  font-weight: bold;
}

#SetRoomTmpSlider{

  position: absolute;
  top: 60%;
  left: 50%;
  margin: -100px 0 0 -150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>

        <script src="https://cdn.jsdelivr.net/npm/round-slider@1.5.1/dist/roundslider.min.js">         </script>
  </head>
  <body>
       <div id="SetRoomTmpSlider"></div>
   </body>
</html>

Answer 1

最简单的答案

您可以尝试在 CSS 中添加如下内容，以在颜色之间添加平滑过渡：

#SetRoomTmpSlider path {
  transition: stroke .2s linear;
}

替代解决方案

以上只是让现有颜色之间的过渡更平滑。但是，根据您最初的问题，我还决定在 cold 和 hot 值之间进行完全转换。

只给出了冷和热颜色。其余的是根据滑块在两个之间的位置计算的。您会错过诸如 yellow/orange 阴影之类的东西（ 因为从蓝色到红色的转变只是通过紫色 ）。但我认为这是一个不错的效果，可以作为实现目标的替代方法。

$("#SetRoomTmpSlider").roundSlider({
  sliderType: "min-range",
  circleShape: "half-top",
  startAngle: "315",
  lineCap: "round",
  radius: 130,
  width: 20,
  min: 5,
  max: 30,
  svgMode: true,
  pathColor: "#eee",
  borderWidth: 0,
  startValue: 0,

  valueChange: function(e) {
    var color = "#0B77DD";
    var logo = document.getElementById("SetRoomTmpSlider");
    let colorRange = [
      "0B77DD",
      "EC2906"
      ],
        colorCount = 25,
        colorIntervals = [
          Math.round((parseInt(colorRange[1].substr(0,2), 16) - parseInt(colorRange[0].substr(0,2), 16)) / colorCount),
          Math.round((parseInt(colorRange[1].substr(2,2), 16) - parseInt(colorRange[0].substr(2,2), 16)) / colorCount),
          Math.round((parseInt(colorRange[1].substr(-2), 16) - parseInt(colorRange[0].substr(-2), 16)) / colorCount)
          ],
        rC = (Math.abs(parseInt(colorRange[0].substr(0,2), 16) + ((e.value - 5) * colorIntervals[0])) < 10) ? "0"+Math.abs(parseInt(colorRange[0].substr(0,2), 16) + ((e.value - 5) * colorIntervals[0])).toString(16) : (parseInt(colorRange[0].substr(0,2), 16) + ((e.value - 5) * colorIntervals[0])).toString(16),
        gC = (Math.abs(parseInt(colorRange[0].substr(2,2), 16) + ((e.value - 5) * colorIntervals[1])) < 10) ? "0"+Math.abs(parseInt(colorRange[0].substr(2,2), 16) + ((e.value - 5) * colorIntervals[1])).toString(16) : (parseInt(colorRange[0].substr(2,2), 16) + ((e.value - 5) * colorIntervals[1])).toString(16),
        bC = (Math.abs(parseInt(colorRange[0].substr(-2), 16) + ((e.value - 5) * colorIntervals[2])) < 10) ? "0"+Math.abs(parseInt(colorRange[0].substr(-2), 16) + ((e.value - 5) * colorIntervals[2])).toString(16) : (parseInt(colorRange[0].substr(-2), 16) + ((e.value - 5) * colorIntervals[2])).toString(16);

    color = "#" + rC + gC + bC;
          
    $("#SetRoomTmpSlider").roundSlider({ "rangeColor": color, "tooltipColor": color });
  }
});

var sliderObj = $("#SetRoomTmpSlider").data("roundSlider");
sliderObj.setValue(30);

#SetRoomTmpSlider .rs-handle {
  background-color: #f3f3f3;
  box-shadow: 0px 0px 4px 0px #000;
}
#SetRoomTmpSlider .rs-tooltip-text {
  font-size: 25px;
  font-weight: bold;
}

#SetRoomTmpSlider {
  position: absolute;
  top: 60%;
  left: 50%;
  margin: -100px 0 0 -150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/round-slider@1.5.1/dist/roundslider.min.js"></script>
<div id="SetRoomTmpSlider"></div>

Roundslider 柔和的颜色变化

Soft color change of Roundslider

html

colors

slider

transition

最简单的答案

替代解决方案