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

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

  • October 20, 2020
  • 4 replies
  • 955 views
S
Forum|alt.badge.img

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();

Best answer by rondev

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

4 replies

rondev
Level 6 ●●●●●●
Forum|alt.badge.img+22
  • rondev
  • Level 6 ●●●●●●
  • Answer
  • October 20, 2020

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

Ron Dev (DM for any request. XM Technology Consultant, surveysolution.in)
S
S
Forum|alt.badge.img

@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
Level 6 ●●●●●●
Forum|alt.badge.img+22
  • rondev
  • Level 6 ●●●●●●
  • October 20, 2020

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

Ron Dev (DM for any request. XM Technology Consultant, surveysolution.in)
S
Forum|alt.badge.img

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)

Terms & ConditionsAccessibility statement