How to customize snapping slider labels | XM Community
Skip to main content
Michael_Cooksey
Administrator
1 month ago
Solved

How to customize snapping slider labels

S
I am implementing a slider question with example ranges from (40000000 to 65000000). I would like it to snap to grid at 21 values (20 intervals). However, the labels are currently overlapping and I would like to format them with dollar sign and commas ($40,000,000 to $65,000,000). My thought was to: show the grid lines for all values but only display alternative numbers so that the overlapping problem is solved. Would anyone know how to do that as well as to implement the formatting code? Any other suggestions will also be greatly appreciated. Thanks!

Best answer by Anonymous

> @sandys said: > Hi @Shashi, thank you for your suggestion. However, it does not work for my survey: > https://berkeley.qualtrics.com/jfe/form/SV_e2thgs3qW20P7RH > > As you can see, all the numbers are still there. If you would like to help troubleshoot more, I've posted a .qsf of the survey. Thanks in advance! Thanks for clarification. You are using constant sum question, hence use the below code in constant sum slider type question var n=2; var s=jQuery("#"+this.questionId+" .xlabel .BorderColor").css("visibility","hidden").length - 2; jQuery("#"+this.questionId+" .xlabel .MinValue , .G"+(s-1)).css("visibility","visible"); for(var i=1;i<s;i++){ if(i%n==0){jQuery("#"+this.questionId+" .xlabel .G"+i).css("visibility","visible");} }
View original

4 replies

A
  • Anonymous
  • 0 replies
  • March 21, 2019
Hello @sandys , Paste the below code in the js(OnReady) slider question `jQuery("#"+this.questionId+" .numbers li:odd").hide();` The above code will hide alternative labels OR Paste the below code and change the value of 'n' to show labels after specific number of labels but first and last labels will always be visible var n=3; var s=jQuery("#"+this.questionId+" .numbers li").hide().length jQuery("#"+this.questionId+" .numbers li.first , li.last").show(); for(var i=1;i<s;i++){ if(i%n==0){jQuery("#"+this.questionId+" .numbers li:eq("+i+")").show();} }
S
  • sandys
  • Author
  • 3 replies
  • March 21, 2019
Hi @Shashi, thank you for your suggestion. However, it does not work for my survey: https://berkeley.qualtrics.com/jfe/form/SV_e2thgs3qW20P7RH As you can see, all the numbers are still there. If you would like to help troubleshoot more, I've posted a .qsf of the survey. Thanks in advance!
A
  • Anonymous
  • 0 replies
  • Answer
  • March 21, 2019
> @sandys said: > Hi @Shashi, thank you for your suggestion. However, it does not work for my survey: > https://berkeley.qualtrics.com/jfe/form/SV_e2thgs3qW20P7RH > > As you can see, all the numbers are still there. If you would like to help troubleshoot more, I've posted a .qsf of the survey. Thanks in advance! Thanks for clarification. You are using constant sum question, hence use the below code in constant sum slider type question var n=2; var s=jQuery("#"+this.questionId+" .xlabel .BorderColor").css("visibility","hidden").length - 2; jQuery("#"+this.questionId+" .xlabel .MinValue , .G"+(s-1)).css("visibility","visible"); for(var i=1;i<s;i++){ if(i%n==0){jQuery("#"+this.questionId+" .xlabel .G"+i).css("visibility","visible");} }
S
1 person likes this
  • S
    sandys
S
  • sandys
  • Author
  • 3 replies
  • March 21, 2019
Thank you @Shashi, works like a charm!!

Leave a Reply


Terms & Conditions