view raw
marcamillion marcamillion - 6 months ago 42
Javascript 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:


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?


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");