How to customize slider scale range? | XM Community
Question

How to customize slider scale range?

  • 26 June 2020
  • 3 replies
  • 188 views

Hi everyone!
The default scale range on the slider bar is from 0-100. I'm trying to find a way to customize that range to display "less than $100", "$200", "$300"... all the way till "More than $1000".
Is there a Javascript code that you can help me with?
Thanks!!


3 replies

Userlevel 5
Badge +4

Yes, there is, use the below code.
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
jQuery('.numbers').find('li:eq(0)').text("$100")
jQuery('.numbers').find('li:eq(1)').text("$200")


// Add up to eq(9)


jQuery('.numbers').find('li:eq(10)').text("More than $1000")
});

Badge

@SurajK,
I have copied and pasted the above JS into my questionnaire (and customised it according to what I needed) and it is working perfectly! Thanks!
However, how do I now change the values on the moving slider (i.e. the "Show value" option) to reflect the same values used in the scale? I am using a pairwise comparison with two extremes.
image.pngHow do I get the moving slider to reflect the values I created (i.e. 4 instead of 12, 5 instead of 13, etc?)
Would really appreciate some advice.
Thanks!

Userlevel 1
Badge +3

Thank you all for this great help.
It worked perfectly for me. However, I am now looking to make fragments of the new scale range that I defined boldly.
I was able to make everything bold with his code, but I am not finding any answer for the partial highlight of my scale:
jQuery('.numbers').find('li:eq(0)').text("X BOLD Z").css( font-weight: bold )
Could anyone help with his?

Leave a Reply