1

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

我究竟做错了什么？

4

1 回答 1

1

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

  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

  1. 在颜色代码生成逻辑中，您正在执行类似的操作e.value * 2.55，但这将返回浮点值。但十六进制颜色代码不接受浮点值。所以让这个值四舍五入。
Math.round(e.value * 2.55)
  1. 您已评论svgMode: true，它应该被启用。

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

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

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

于 2021-09-09T16:29:10.920 回答