slider bar with text labels on either side | XM Community
Skip to main content

Hello everyone,
I have a question about sliders. How can I create just two text labels (no numbers along the slider) on either side of a slider bar. The presentation would be something like below.
Screen Shot 2021-10-07 at 11.51.18 AM.pngIs there anyone who can help me with this setup? Thanks!
Alex

You can add the following Javascript to your question:

Qualtrics.SurveyEngine.addOnload(function()
{
   /*Place your JavaScript here to run when the page loads*/
   jQuery(".statement-container div").eq(0).append(" not all are happy ");
   jQuery("#"+this.questionId+" ul.numbers li").each(function() { this.innerHTML = this.innerHTML.replace("-",""); });
});

The first query adds the text to the right of the slider bar, the second removes the numbers from above the slider bar. You won't see the text to the right of the slider in the editor, but you should see it in the preview.
I hope this works for you!


MarE Thank you very much for offering this solution. It's very close to what I intended. But there are still two issues to be resolved - as seen from the screenshot. First, how can I get rid of the the two numbers above the 'nobody is happy' and 'not all are happy'? Second, when I drag the dot along the slider, a number is showing along with, and how can I get rid of the number too? Despite this, the decision made would not be a binary choice, and what to be recorded would still be in a scale. Do you have more insights into this? Appreciate a lot for for your help!
Screen Shot 2021-10-07 at 3.22.18 PM.png


https://community.qualtrics.com/XMcommunity/discussion/comment/41056#Comment_41056You can remove the number from the dot on the slider, you need to turn off "show value" in the question format options.
image.png
To remove the numbers above the slider, the easiest thing is to not show the grid lines:
image.pngIf you do not "snap to grid lines," your subjects will be able to select any value between 0 and 100.

Hope that helps!


MarE Cool. That's exactly what I want. Thank you for your help.
If you don't mind, can I additionally ask if you have any idea as to how I may make the labels for both ends show up at the left and right side of the slider bar but not above the bar, as I would have some labels pretty long? Very appreciative for your insights!






https://community.qualtrics.com/XMcommunity/discussion/comment/41063#Comment_41063Unfortunately, I do not know how to get the slider question to have two handles. I know it's been asked before, but I haven't seen an answer https://community.qualtrics.com/XMcommunity/discussion/4002/two-handle-sliders-java-script
I'll keep an eye on this thread in case you do get an answer. Good luck with your survey!


MarE Very helpful! Thank you anyway!


Hi @MarE,
I was wondering if you have found out how to place the labels to the left and the right of the slider scale as I am having the same issue...
Thanks a lot,
Elitza


Hi,

I tried this fix and one very similar (if not identical) to it after running into the spillover problem. See

With both versions, the appended label appears right next to the initial label (all pushed to the left). See screenshot.
 



I’m wondering if something changed over the past year, or if there is another piece of code I need to add so the right-most anchor shows up on the right side.

 

Thank you for any tips you might have!


REPLYING TO MYSELF HERE …

A colleague looked at the code and showed me how to update it so the second label appears at the opposite (right) side of the range. Here’s the updated code with the new portion highlighted …

jQuery("#"+this.questionId+" .statement-container div").eq(0).append(" <span style=float:right>PICKARD</span> ");

 

Also, you will want to add "#"+this.questionId+" to the left of  .statement-container div" to avoid the spillover problem.

 


Hello everyone!

I had the same problem (two text labels (no numbers along the slider) on either side of a slider bar) and this helped me to solve it. Thank you!

Now I’ve got a further question:

For one of the text labels (the one on the right side) I would like to carry forward a text entry from a question above. Does anyone know how to insert this into the Java-code?

What would work for me as well: Carrying forward a text entry from a question above and insert it into the question text (the text above the question).

Hoping anyone can help me

🙂 h.


Edit: Found a solution for this:

What would work for me as well: Carrying forward a text entry from a question above and insert it into the question text (the text above the question).

(with piped text)

So what remains:

For one of the text labels (the one on the right side) I would like to carry forward a text entry from a question above. Does anyone know how to insert this into the Java-code?


Sorry if I ennoy you with my persistence … 

I still haven’t found a solution for my problem.

My current code looks like this:

     Qualtrics.SurveyEngine.addOnload(function()
     {
        /*Place your JavaScript here to run when the page loads*/
        jQuery("#"+this.questionId+" .statement-container div").eq(0).append("Our Company");
        jQuery("#"+this.questionId+" ul.numbers li").each(function() { this.innerHTML = this.innerHTML.replace("-",""); });
        jQuery("#"+this.questionId+" .statement-container div").eq(0).append(" <span style=float:right>Competitor</span> ");
        this.setChoiceValue(1, "50");
     });

Now how can I insert something like this …

     $q://QID10/ChoiceTextEntryValue

… so that the text entry from QID10 is displayed as the label on the right side of the slider?


Leave a Reply