Change Color of Slider Bar from Gray to Color Gradient | XM Community
Skip to main content

Hello,
I am trying to change the background color of the slider bar (Draggable Sliders) to a color gradient going from red to yellow to green. I found the following post <https://www.qualtrics.com/community/discussion/2269/color-transition-in-slider-bar> which addresses my question and used the following custom css from that link:
.Skin .horizontalbar .Slider .track {
background-image: linear-gradient(-90deg,red,yellow,green);
}
Once the css has been added the slider bars disappear (see included image) instead of the intended color gradient.
Slider Bar Question.pngI also tried the following javascript but had similar results.
var that=this.questionId;
jQuery(".track:eq(0)").css({ "background-image":"linear-gradient(-90deg,red,yellow,green)"});
Does anyone know why this might be happening and how to rectify the issue?

Paste the below code in the slider question, add javascript Onready function:
 jQuery(".track:eq(0)").css({ "background-image":"linear-gradient(-90deg,green,yellow,red)"});
Output:
image.png

rondev Thanks for the fast reply this code worked! I also realized I was in a static theme which was overriding this code initially but once switched to dynamic theme things went smoothly.

Leave a Reply


Terms & Conditions