Hello, there. I posted a question in a forum yesterday that I think is more appropriate for this sub-forum.



You can access the original question here, but I'll also detail the specifics to this post.



I would like to use JavaScript to have the background of slider questions (draggable bars) in my survey change from blue (all the way to the left; i.e., 0) to red on the right (i.e., 100) _as the user slides_ the icon.



I would like to accomplish something similar to this colored jQuery UI slider. However, I only want the color to be blue-to-red (not the full range of colors in the provided example). I'd like to be able to do this using JavaScript for specific draggable bars questions because not all questions (sliders will not; bars will) will have this color option.



I am aware of this post on how to change the background image of the slider, but this is _not_ what I want to achieve.



I found a way to get the bar to change in a way that _is close_ to what I desire.



If I use the code:

`var bar = document.querySelectorAll('.bar');

for (var i=0; i < bar.length; i++) {

bar[i].setAttribute("style", "background-image:linear-gradient(-90deg,red,blue)");

}`



I see the slider change from blue to red as I slide across. However, the if I slide all the way to the right I still see blue on the left. I would like the entire bar to change color as the value of the slider bar question increases. For example, when sliding to a value of 25 or less the entire bar would be blue, sliding to 50 would make the entire bar a redish-blue, and sliding to 100 would make the entire bar red. Does that make sense?