search

IonDen / ion.rangeSlider

jQuery only range slider
http://ionden.com/a/plugins/ion.rangeSlider/en.html
MIT License
2.56k stars 508 forks source link

Use custom color range #751

Open danieldestro opened 3 years ago

danieldestro commented 3 years ago

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?

image

IonDen commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

danieldestro commented 3 years ago

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 commented 3 years ago

Great, good luck!