Change the color left side and right side of the slider about slider HOT 1 OPEN

Old issue, but as I had the same need today I will post a solution. I found that you can use the options parameters, which allow you to use noUiSlider base functionalities.

If you don't want any color between the two handles, you need this :

<Slider
   :options="{connect: [true, false, true]}"
   v-model="values"
/>

This will tell to add a connection between the start of the slide and the first handle, and between the second handle and the end of the slide. Now you just need to add css rules to change the background colors :

.slider-connect {
   background: red;
}
.slider-connect + .slider-connect {
   background: green;
}

If you want to keep the color in the middle, than you don't need the options parameters, just add three css rules.
Hope this help.

from slider.