How to hide the numbers on a slider bar, except for the endpoints | XM Community
Solved

How to hide the numbers on a slider bar, except for the endpoints

  • 20 October 2020
  • 4 replies
  • 496 views
S
Badge

I was able to use the JS code on this link to remove all of the numbers on a slider bar item (https://www.qualtrics.com/community/discussion/4976/hide-numbers-on-slider-question), but I can't find any code on how to hide only the middle values and show the endpoints.

Any advice on how to update this code to do this?

jQuery("ul.numbers").hide();

icon

Best answer by rondev 20 October 2020, 17:26

View original

4 replies

rondev
Rank
Userlevel 7
Badge +22

Use the below code:
jQuery(".numbers li").not(".last").not(".first").hide();

Ron Dev (DM for any request. Freelancer, surveysolution.in)
S
Badge

@rondev , thank you, that does work! However, there is a space between the numbers above the bar, and the bar itself (I have other code moving the words to below the bar). Do you know how to remove this space, so the number lie close right on top of the bar?
image.png

rondev
Rank
Userlevel 7
Badge +22

https://www.qualtrics.com/community/discussion/comment/31258#Comment_31258Post your other/ full code

Ron Dev (DM for any request. Freelancer, surveysolution.in)
S
Badge

This is what I had before, with no numbers:
Qualtrics.SurveyEngine.addOnload(function()
{
jQuery('.QuestionText').eq(2).css('display','none');
 jQuery("#"+this.questionId+" ul.labels").insertAfter("#"+this.questionId+" div.slider-container");
 jQuery("ul.numbers").hide();
});

This is with your revision:
Qualtrics.SurveyEngine.addOnload(function()
{
jQuery('.QuestionText').eq(3).css('display','none');
 jQuery("#"+this.questionId+" ul.labels").insertAfter("#"+this.questionId+" div.slider-container");
jQuery(".numbers li").not(".last").not(".first").hide();
});

(I have multiple sliders on each page, so there is a line that reduces the space between items, as well)

Leave a Reply


Terms & Conditions