Slider Question adding a middle line | XM Community
Skip to main content

I want to add a middle line into the slider question I have. I tried to use Grid Lines with Snap to Grid or without Snap to Grid function, but it doesn't look like the way I want. Here is an example screenshot of the output I have right now:
image.pngI have two questions:
1-) When I select Grid Lines to 1 --> I can only see -4.3 and +4.3 (min and max values) and when I make grid lines to 2, I can see 0 too. However, I only wanna show 0.
2-) Is there any way to create a vertical line that shows the position of zero for all choices? It is gonna be like a vertical line at the middle of each question coming from 0.

Thank you very much for your help. I really appreciate!

Solution for point 1: Use the below JS:
jQuery("#"+this.questionId+" .numbers .first , .numbers .last").css("visibility","collapse");

Solution for Point 2: Paste the below CSS in the look and feel -> style -> custom css:

.slider-container:after {
  content:"";
  position: absolute;
  z-index: -1;
  top: 50px;
  bottom: 0;
  left: 50%;
  border-left: 2px solid #9b9b9b;
  transform: translate(-50%);
}

Dear rondev
This really saved my day! Thanks a lot. I really appreciate! 😊

Regarding solution 2, it will apply to all slider questions of the survey, so if you only want to apply to a particular slider question, just paste below JS code in respective JS question:
jQuery("#"+this.questionId+" .slider-container").css("background", "linear-gradient(#b9b9b9, #b9b9b9) no-repeat center/2px 100%");

https://community.qualtrics.com/XMcommunity/discussion/comment/27556#Comment_27556I want to make this, but put more gridlines in the slider. Instead of just one, there should be, at least, 8 for each label, and they have to be evenly distributed. Is there any way to do this?

Thank you so much for taking time out of your day to create this custom code solution rondev! And, thank you alperen for confirming that the solution works - this confirmation helps countless users 🙂

Leave a Reply


Terms & Conditions