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

Slider Question adding a middle line

  • July 6, 2020
  • 6 replies
  • 334 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!

Best answer by rondev

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

6 replies

rondev
Level 6 ●●●●●●
Forum|alt.badge.img+22
  • rondev
  • Level 6 ●●●●●●
  • July 6, 2020

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

Ron Dev (DM for any request. XM Technology Consultant, surveysolution.in)
SuhasM
A
rondev
Level 6 ●●●●●●
Forum|alt.badge.img+22
  • rondev
  • Level 6 ●●●●●●
  • Answer
  • July 6, 2020

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. XM Technology Consultant, surveysolution.in)
SuhasM
A
A
  • alperen
  • Author
  • July 6, 2020

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

SuhasM
rondev
Level 6 ●●●●●●
Forum|alt.badge.img+22
  • rondev
  • Level 6 ●●●●●●
  • July 6, 2020

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. XM Technology Consultant, surveysolution.in)
D
Forum|alt.badge.img+1
  • David_UB
  • September 28, 2022

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
Qualtrics Employee
Forum|alt.badge.img+16
  • SuhasM
  • Qualtrics Employee
  • September 29, 2022

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 🙂

Terms & ConditionsAccessibility statement