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?