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.
Thanks in advance for any help or info you can provide!
I should note that I have almost no experience with Java or coding other than in R.
However, 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, sliding to a value of 25 would be blue, sliding to 50 would make the entire bar a redish-blue, and sliding to 100 would make the entire bar red.
However, 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, sliding to a value of 25 would be blue, sliding to 50 would make the entire bar a redish-blue, and sliding to 100 would make the entire bar red.
Leave a Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.