Changing noUiSlider connect color based off value condition?

user_4107349 0
Viewed 329

I'd like to change the color of a noUiSlider connect element when a value condition is met, and I can't figure out how to make JavaScript change the color set in the CSS:

.noUi-connect {
    background: green;
    }

Minimal example below. How can I replace {console.log("true")} with something that will change the connect color?

<!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>

Note both strings log when tooltipSlider.noUiSlider.get()[0] == 0 seems met for reasons I don't understand, so perhaps this if statement is unsuitable. The connect element must be some color when condition is true (or slider is set to that value), another color when false.

There's already an unaccepted answer to a similar question I don't understand. Can this be used?

nouislider css javascript
1 Answers

It seems like you're placing the <script> block inside the div where the slider should be rendered – better place it above.

Also it seems like the console.log("true")} {console.log("false")}}) expression needs some cleanup – after console.log("true")} there should be an else.

To change the color of the connector based on a condition you could apply a Css selector to it by selecting the respective element like:

<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>

As far as i understand the docs, the condition tooltipSlider.noUiSlider.get()[0] == 0 will be true if the first handle is set to 0. In this case, the first connector will have a width of 0 as well, so colouring it will have no visible effect.

I assume you want the visible connector to be coloured. The NoUiSlider example implies that the connect option takes an array of booleans to specify every connector separately. To target a specific connector you have to adapt the above code with connect[index of connector you want to have a different color].classList...

And in your Css:

.noUi-connect {
  ​background: green;
}
.noUi-connect-red {
   background: red;
}
user_37874070
Related