根据值更改圆形滑块颜色

Question

当人们将滑块从 100 移动到 0 时，我试图让范围颜色从绿色变为红色。我使用 JS 圆形滑块 (https://roundsliderui.com/document.html)。

MRE 在这里：https://codepen.io/chapkovski/pen/gORmrbR 但它看起来像这样：

$("#slider1").roundSlider({
    sliderType: "min-range",
    value: 80,
      // svgMode: true,
    valueChange: "changeColor",
});
function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}


var sliderObj = $("#slider1").data("roundSlider");
function changeColor(e) {
    const val = e.value * 2.55;
      sliderObj.rangeColor = rgbToHex(255 - val, val, 0);
}

我做错了什么？

Answer 1

您的演示中存在一些问题，因此您可能需要更正以下内容：

您设置的属性值有误。要动态更新任何属性值，您可以遵循以下任何语法：

$("#slider1").roundSlider("option", "rangeColor", rgbToHex(255 - val, val, 0));

OR

$("#slider1").roundSlider({"rangeColor": rgbToHex(255 - val, val, 0) });

OR

sliderObj.option("rangeColor", rgbToHex(255 - val, val, 0));

https://roundsliderui.com/document.html#how-to-use-options

在颜色代码生成逻辑中，您正在做这样的事情 e.value * 2.55，但这将 return 浮动值。但是十六进制颜色代码不接受浮点值。所以让这个值四舍五入。

Math.round(e.value * 2.55)

您评论了 svgMode: true，它应该被启用。

还有一个建议，您可以升级到v1.6.1 以获得更好的改进。

根据值更改圆形滑块颜色

change round slider color depending on value

javascript

round-slider

这是修改后的 DEMO，效果很好：

https://codepen.io/soundar24/pen/mdwWBzX