How to customize snapping slider labels | XM Community
Skip to main content
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!
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();}

}
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!
> @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");}

}
Thank you @Shashi, works like a charm!!

Leave a Reply