Change color of slider in slider bar questions | Experience Community
Skip to main content
Solved

Change color of slider in slider bar questions

  • April 21, 2023
  • 4 replies
  • 1407 views
J
Level 2 ●●
Forum|alt.badge.img+2

I am trying to change the color of the slider in slider questions. It is white and hard to see. I see posts about changing the slider bar but cannot find anything for the slider itself. 

Thanks!

Best answer by Deepak

I could not get either of those to work. Below is an image of my issue. The white slider is what I am trying to change. I was able to make the bar blue through: Look and Feel - Style - Custom CSS and I entered the following which I adapted from another post:

 

  .Skin .horizontalbar .Slider .track {
background-image: linear-gradient(-90deg,blue,blue);

}


Can I add another argument into the custom CSS to make the slider or “handle” red?

 

 

Try this:

.Skin .horizontalbar .Slider .handle {
    background: darkred !important;
    border: darkred !important;
    }

 

4 replies

qualtrics_nerd
Level 5 ●●●●●
Forum|alt.badge.img+19
  • qualtrics_nerd
  • Level 5 ●●●●●
  • April 21, 2023

Hi @jillpinsky_BLG ,

I assume you want to change the color of handle of slider , you can achieve that by using below code:

 

<style>

div#QID58\~1\~handle {
    background: red !important;
}
</style>

PS: You have to update QID as per your survey.

Hope this resolves your query😊!!

Shashi
Level 8 ●●●●●●●●
Forum|alt.badge.img+34
  • Shashi
  • Level 8 ●●●●●●●●
  • April 21, 2023

We can also use JS to make it more generalised for changing slider handle color

	jQuery("#"+this.questionId+" .horizontalbar .Slider .handle").css("background","red");

 

J
Level 2 ●●
Forum|alt.badge.img+2
  • jillpinsky_BLG
  • Author
  • Level 2 ●●
  • April 21, 2023

I could not get either of those to work. Below is an image of my issue. The white slider is what I am trying to change. I was able to make the bar blue through: Look and Feel - Style - Custom CSS and I entered the following which I adapted from another post:

 

  .Skin .horizontalbar .Slider .track {
background-image: linear-gradient(-90deg,blue,blue);

}


Can I add another argument into the custom CSS to make the slider or “handle” red?

 

 

Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+46
  • Deepak
  • Answer
  • April 21, 2023

I could not get either of those to work. Below is an image of my issue. The white slider is what I am trying to change. I was able to make the bar blue through: Look and Feel - Style - Custom CSS and I entered the following which I adapted from another post:

 

  .Skin .horizontalbar .Slider .track {
background-image: linear-gradient(-90deg,blue,blue);

}


Can I add another argument into the custom CSS to make the slider or “handle” red?

 

 

Try this:

.Skin .horizontalbar .Slider .handle {
    background: darkred !important;
    border: darkred !important;
    }

 

Terms & ConditionsAccessibility statement