Slider Question adding a middle line | Experience Community
Skip to main content
JoseS
Administrator
1 year ago
Solved

Slider Question adding a middle line

  • Jul 6, 2020 7:45 PM UTC
  • 6 replies
  • 396 views

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

View original

6 replies

rondev
Level 6 ●●●●●●
Forum|alt.badge.img+22
  • rondev
  • Level 6 ●●●●●●
  • Jul 6, 2020 8:14 PM UTC

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)
    rondev
    Level 6 ●●●●●●
    Forum|alt.badge.img+22
    • rondev
    • Level 6 ●●●●●●
    • Answer
    • Jul 6, 2020 8:43 PM UTC

    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)
      • alperen
      • Author
      • Jul 6, 2020 8:48 PM UTC

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

        rondev
        Level 6 ●●●●●●
        Forum|alt.badge.img+22
        • rondev
        • Level 6 ●●●●●●
        • Jul 6, 2020 8:57 PM UTC

        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)
        Forum|alt.badge.img+1
        • David_UB
        • Sep 28, 2022 7:43 AM UTC

        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
        • Sep 29, 2022 7:38 PM UTC

        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