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

问题描述

当满足值条件时，我想 https://stackoverflow.com/a/50093489/2607773，但我不知道如何让 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 语句可能不合适。当条件为真（或滑块设置为该值）时，连接元素必须是某种颜色，当条件为假时必须是另一种颜色。

已经有 change the color of a noUiSlider connect element 我不明白。这个可以用吗？

解决方法

您似乎将 <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;
}

javascript nouislider