Slider Question adding a middle line | XM Community
Solved

Slider Question adding a middle line

  • 6 July 2020
  • 6 replies
  • 209 views
A

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!

icon

Best answer by rondev 6 July 2020, 22:43

View original

6 replies

rondev
Rank
Userlevel 7
Badge +22

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

Ron Dev (DM for any request. Freelancer, surveysolution.in)
rondev
Rank
Userlevel 7
Badge +22

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%);
}

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

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

rondev
Rank
Userlevel 7
Badge +22

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%");

Ron Dev (DM for any request. Freelancer, surveysolution.in)
D
Badge +1

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?

SuhasM
Rank
Userlevel 4
Badge +16

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