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

Change Color of Slider Bar from Gray to Color Gradient

  • August 15, 2020
  • 2 replies
  • 305 views
S

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?

Best answer by rondev

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

    2 replies

    rondev
    Level 6 ●●●●●●
    Forum|alt.badge.img+22
    • rondev
    • Level 6 ●●●●●●
    • Answer
    • August 15, 2020

    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

    Ron Dev (DM for any request. XM Technology Consultant, surveysolution.in)
      S
      • SJ_UofA
      • Author
      • August 18, 2020

      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.

        Terms & ConditionsAccessibility statement