Move Slider Labels below "Choices" | XM Community
Skip to main content
Hi folks,



Hoping to get some help moving the label text below the slider bar as in the screenshot below.



I've had a look at a couple of the existing questions but they don't seem to work. For e.g., on this one: https://www.qualtrics.com/community/discussion/2326/a-way-to-change-the-position-of-the-labels-in-a-slider-question



With the one above, the labels just disappear.



!
It turns out the above wasn't working because I had multiple slider qs on the same page.



Coworker helped me figure it out, here's the code that works. It needs to be on just one slider per page:





Qualtrics.SurveyEngine.addOnReady(function()

{

jQuery("ul.labels").insertAfter("div.slider-container");

jQuery("ul.labels").css('font-weight', '700');



});



Problem is solved thanks
@fmoosvi,



In most instances, you want to limit your selectors to the current question. That way your code won't conflict with other questions on the same page. So the following would work with multiple slider questions on the page:

```

Qualtrics.SurveyEngine.addOnReady(function()

{

var labels = jQuery("#"+this.questionId+" ul.labels");

labels.insertAfter("div.slider-container");

labels.css('font-weight', '700');

});

```
That is a very good point, thanks for the heads up.
@TomG is there a way to add to your above JS in order to define the spacing between the labels and the slider? Currently, the labels are spaced too far from the slider and I would like to bring them closer.
> @MauroUsabilitySci said:

> @TomG is there a way to add to your above JS in order to define the spacing between the labels and the slider? Currently, the labels are spaced too far from the slider and I would like to bring them closer.

Yes, probably. Can you provide a picture of your slider question?
@TomG here ya go! I would like the "0 Completely Identical" and "100 Completely Different" labels to be closer to the slider axis.



!
> @MauroUsabilitySci said:

> @TomG here ya go! I would like the "0 Completely Identical" and "100 Completely Different" labels to be closer to the slider axis.

I'm not sure what theme you are using, but try this:

```

jQuery("#"+this.questionId+" td.BarOuter").css("padding-bottom", "10px");

```
Thank you @TomG , that worked!
Hello - I have a similar challenge. I am working with a custom built bow tie slider that someone shared with me. I would like to bring the "choice" closer to the bow tie slider and add a little padding between the labels and the bow tie because when the choice bleeds onto a second line, the bow tie overlaps with the labels. Any suggestions? Thanks so much!!

Hi guys,
I am very new to Qualtrics and have been trying to incorporate these into my survey, however, no luck. I found somewhere that it could be because I am using a non-upgraded version, which would not allow these custom codes. Would that be the reason or is it me failing to install these correctly?
Any information would be much appreciated.
B.

TomG Can we add sliders label on left and right so like opposite words Happy>>>>>>SLIDER>>>>SAD

@Rock,
Yes, but it must be done with JavaScript. It is called a bipolar or AHP slider (AHP has a scale, bipolar doesn't). See: https://www.qualtrics.com/community/discussion/2201/analytic-hierarchy-process-in-qualtrics for an example.

https://community.qualtrics.com/XMcommunity/discussion/comment/10522#Comment_10522Hi, despite using this code, the labels are being applied to all slider questions on the page.
Do I need to change the question id in this code?
Anything else I can do to make it work?
Context: I need to add customized labels to each slider question (5-7 questions on a page).

https://community.qualtrics.com/XMcommunity/discussion/comment/39857#Comment_39857The code in that post only applies to the current question. If it is applied to all questions on the page it is coming from some other JS or CSS style.

https://community.qualtrics.com/XMcommunity/discussion/comment/10522#Comment_10522Thanks TomG , great solution.
Although I would add on that the css selector passed into .insertAfter() method has to be specific to the questionId. So instead of:
labels.insertAfter("div.slider-container");
we should use:
labels.insertAfter("#"+this.questionId+"div.slider-container");

https://community.qualtrics.com/XMcommunity/discussion/comment/42129#Comment_42129No, that is unnecessary. In the code above, labels is already specific to the question.

https://community.qualtrics.com/XMcommunity/discussion/comment/42130#Comment_42130When i use
labels.insertAfter("div.slider-container");
I get
Capture.PNGThe ul.labels got inserted multiple times.
But if i use:
labels.insertAfter("#"+this.questionId+"div.slider-container");
I get
Capture.PNG

https://community.qualtrics.com/XMcommunity/discussion/comment/42131#Comment_42131That’s because you didn’t set labels as in my accepted answer post above.

https://community.qualtrics.com/XMcommunity/discussion/comment/42133#Comment_42133I did for both questions. The ul.labels will get duplicated.
image.png

Leave a Reply


Terms & Conditions