marcamillion marcamillion - 12 days ago 6
jQuery Question

How do I change the color on my noUiSliders depending on the value it currently is at?

So I created some custom color classes for my sliders and it works well...this is how it looks:

colored-sliders

All I simply did was created the following classes:

.red .noUi-connect {
background: #c0392b;
}

.orange .noUi-connect {
background: #2980b9;
}

.green .noUi-connect {
background: #27ae60;
}


And applied them to my divs like so:

<div id="slider-speed" class="slider red"></div>
<div id="slider-speed" class="slider orange"></div>
<div id="slider-speed" class="slider green"></div>


However, what I want to do is whenever the user moves the slider left or right, the color of the slider changes based on the value.

So 1 - 3 = red, 4 - 6 = orange, 7 - 10 = green.

How do I do that?

Answer

You could try using the event callback for "update" like this:

slider.noUiSlider.on('update', function(values, handle){
  updateColorClass(document.getElementById('slider-speed'), values[handle]);
});

function updateColorClass(element, value) {
  var color;
  if (value < 4) { 
    color = 'red';
  } else if (value < 7) { 
    color = 'orange';
  } else {
    color = 'green';
  }

  element.classList.remove("red", "orange", "green");
  element.classList.add(color);
}
Comments