根据关闭值条件更改 noUiSlider 连接颜色？

Question

我想 change the color of a noUiSlider connect element 满足某个值条件时，但我不知道如何 JavaScript 更改 CSS 中设置的颜色：

.noUi-connect {
    background: green;
    }

下面的最小示例。我怎样才能用会改变连接颜色的东西替换 {console.log("true")}？

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <link href="nouislider.min.css" rel="stylesheet">
    <link href="notooltips.css" rel="stylesheet">
</head>
<script src="nouislider.min.js"></script>
<script src="wNumb.js"></script>
<div id="tooltipSlider"><script>
    var tooltipSlider = document.getElementById('tooltipSlider');
    noUiSlider.create(tooltipSlider, {
    start: [1, 9],
        connect: true,
        tooltips: [true, true],
        range: {'min': 0,'max': 10}
        });</script>
<script>tooltipSlider.noUiSlider.on("change", function(){
        if (tooltipSlider.noUiSlider.get()[0] == 0) {
        console.log("true")} {console.log("false")}})</script>
</div></html>

请注意，由于我不明白的原因，当 tooltipSlider.noUiSlider.get()[0] == 0 似乎满足时，两个字符串都会记录，所以这个 if 语句可能不合适。当条件为真（或滑块设置为该值）时，连接元素必须是某种颜色，当条件为假时，另一种颜色。

已经有an unaccepted answer to a similar question我不明白了。这个可以用吗？

Answer 1

您似乎将 <script> 块放置在应该呈现滑块的 div 内 – 最好将其放在上方。

console.log("true")} {console.log("false")}}) 表达式似乎也需要一些清理——在 console.log("true")} 之后应该有一个 else.

要根据条件更改连接器的颜色，您可以通过选择相应的元素对其应用 Css 选择器，例如：

<div id="tooltipSlider"></div>

<script>
    var tooltipSlider = document.getElementById('tooltipSlider');

    noUiSlider.create(tooltipSlider, {
        start: [1, 9],
        connect: true,
        tooltips: [true, true],
        range: {'min': 0,'max': 10}
    });

    tooltipSlider.noUiSlider.on("change", function(){
        var connect = tooltipSlider.querySelectorAll('.noUi-connect');

        if (tooltipSlider.noUiSlider.get()[0] == 0) {
            connect[1].classList.add('noUi-connect-red');
        } else {
            connect[1].classList.remove('noUi-connect-red');
        }
    })
</script>

据我了解the docs，如果第一个句柄设置为 0，条件 tooltipSlider.noUiSlider.get()[0] == 0 将为真。在这种情况下，第一个连接器的宽度也将为 0 , 所以着色不会有明显的效果。

我假设您希望可见连接器是彩色的。 The NoUiSlider example 意味着 connect 选项采用布尔值数组来分别指定每个连接器。要针对特定连接器，您必须使用 connect[index of connector you want to have a different color].classList...

调整上述代码

在你的 Css 中：

.noUi-connect {
  background: green;
}
.noUi-connect-red {
   background: red;
}

根据关闭值条件更改 noUiSlider 连接颜色？

Changing noUiSlider connect color based off value condition?

javascript

css

nouislider