根据值更改圆形滑块颜色

【问题标题】：change round slider color depending on value根据值更改圆形滑块颜色
【发布时间】：2024-01-14 10:04:01
【问题描述】：

当人们将滑块从 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);
}

我做错了什么？

【问题讨论】：

我怀疑这样你就可以改变颜色。如果有一个用于 rangeColor 的设置器，您只能更改颜色。

标签： javascript round-slider

【解决方案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 的操作，但这将返回浮点值。但十六进制颜色代码不接受浮点值。所以让这个值四舍五入。

Math.round(e.value * 2.55)

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

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

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

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

【讨论】：