Use custom color range

[danieldestro]

I want to use a custom color range that optionally may change the color of the current slider tag according to its position. Is it possible?

[IonDen]

Hi, use this technique to update the sliders skin to match your needs: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()#gradient_with_multi-position_color_stops

[danieldestro]

Thanks @IonDen but it did not work as expected. I tried to replace "background" attribute for either the following classes (.irs-line, .irs-bar, .irs). What I want is to show the colors in the bar as it is displayed in my mockup above.

[IonDen]

Please prepare the demo, I can't say what is not working without seeing your code. https://jsfiddle.net/IonDen/uqs7njp9/

[danieldestro]

I figured it out. Thanks for the fiddle.

This works as I wish:

.irs--round .irs-bar { background: transparent; }
.irs--round .irs-line { background: linear-gradient(90deg, yellow, green); }

I was doing this, that´s why the colors changed as the handle moves:

.irs--round .irs-bar { background: linear-gradient(90deg, red, green); }

Fiddle updated: https://jsfiddle.net/danieldestro/utpy3g8x/

[IonDen]

Great, good luck!