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

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!

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😊!!


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

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

 


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?

 

 


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;
}

 


Leave a Reply