Adding additional content to slider grid values - different for each grid value | XM Community
Solved

Adding additional content to slider grid values - different for each grid value

  • 28 March 2020
  • 2 replies
  • 54 views

Badge
Hello!

I am creating a survey that asks subjects to report their subjective probability as a percentage. Currently, the slider looks like this:

!


Ideally, under the percentage grid values I would also like to show the fractional equivalent. Specifically, under "25 %" (but above the slider), I'd like the phrase "1 in 4" appear; under "50 %" I'd like the phrase "1 in 2" to appear, and under "75 %" I'd like the phrase "3 in 4" to appear.

I used the following CSS code to add "%" symbols to the grid values:

ul.numbers li::after {
content:"%";
}

But now that the additional content I want to add changes from value to value, I think I will need a different approach. Is there an easy way to loop through the list of percentages and add a different character string to each (and, additionally, have it show up below the percentage value, on a new line)?

Thanks a lot.
icon

Best answer by rondev 28 March 2020, 08:07

View original

2 replies

Userlevel 7
Badge +22
Use the below code in the slider JS question

jQuery("#"+this.questionId" .numbers li:eq(0)").html("0%<br>0 of 4");
jQuery("#"+this.questionId" .numbers li:eq(1)").html("25%<br>1 in 4");
jQuery("#"+this.questionId" .numbers li:eq(2)").html("50%<br>1 in 2");
jQuery("#"+this.questionId" .numbers li:eq(3)").html("75%<br>3 in 4");
jQuery("#"+this.questionId" .numbers li:eq(4)").html("100%<br>4 in 4");
Badge
Thanks a lot, this worked great! (I just needed to add one more "+" character in each line)

Leave a Reply