Customising the length of my sliders

You can of course set the min/max for the sliders, so I take it that's not what you mean. By "length", do you mean length across the page? Were you wanting to shorten or lengthen your sliders?

https://community.qualtrics.com/XMcommunity/discussion/comment/39963#Comment_39963I want to shorten my sliders

https://community.qualtrics.com/XMcommunity/discussion/comment/40151#Comment_40151Hi Jeremy
Thank you so much for your help!
By the way, Could you tell me how to  reduce the spacing between each option in the slider questions. 

Certainly! Easiest way I've found to do this in the past was to modify the padding-top property. The default is 20px, just to give you a reference point. I just liked the way 6 looked in my survey.
jQuery("#" + this.questionId + " .statement-container").css("padding-top",6);

https://community.qualtrics.com/XMcommunity/discussion/comment/40214#Comment_40214Hi, Jeremy, Where did I add the code? Is it added in Custom CSS?

You'll want to go to the actual slider question and add this to the JavaScript for that question (left side panel, all the way at the bottom: JavaScript). When the window opens, paste these two lines where it says /*Place your JavaScript here to run when the page loads*/. You can leave the rest of the lines. So my JavaSciprt looks like this:
Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("#" + this.questionId + " .QuestionBody").width(600);
jQuery("#" + this.questionId + " .statement-container").css("padding-top",6);

});

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});

This is for changing individual questions. Were you want to change the sliders across your entire survey? That would be CSS and that code will look completely different. But if that's what you're after, I can probably convert my solution.
JS = attached to each question (can be different for each question)
CSS = globally change an element across the entire survey.

https://community.qualtrics.com/XMcommunity/discussion/comment/40219#Comment_40219Hi Jeremy, This code didn't work. The bar and the heading still have large space, and participants still need to scroll out to see all bars. How can I show the heading and the corresponding bar on the same line? Meanwhile, How to make the space between the two bars smaller.

interesting, when I run that code, I get the following:
(top slider question is default for our theme, bottom one is with the JS)
Would you mind exporting your survey (.qsf file) and either sending it to me/posting it here? I'd be happy to take a look. It may just be the selectors need some tweaking to work properly. Actually a preview link to your survey may be enough for me to see what's going on.

https://community.qualtrics.com/XMcommunity/discussion/comment/40397#Comment_40397test.qsfHi Jeremy
Please find the attachment

https://community.qualtrics.com/XMcommunity/discussion/comment/40397#Comment_40397This is because I show the value of the slider?

Correct, it looks like the padding between the emotion and the slider is to allow room for the value. When I hard set that padding to zero, we get overlap from the slider value tooltip:
I added two more JS lines to account for the large padding Qualtrics is adding to each statement:
jQuery("#" + this.questionId + " div.statement").css("padding-bottom","20px")
jQuery("#" + this.questionId + " td.BarOuter").css("padding-bottom","5px")
Here's what it looks like for me:
Play with the numbers and see what looks good to you. Alternatively, you could use [5] stars which would remove a lot of complexity if you don't need a specific integer value (obviously, your values with 5 stars would be 20,40,60,80,100, so you could still have values associated rather than "46"; oddly specific haha). Totally up to you, hope this helped!

https://community.qualtrics.com/XMcommunity/discussion/comment/40401#Comment_40401So I can't make the heading putting on the left side of the bar?

You can, but it throws off other placements. For example, if I use the console manually move Happiness onto the same line as it's div slider container, the Happiness span gets pushed out past the width of the page into the right margin:
This also throws off the numbers across the top in reference to the tooltip slider, so probably best to leave the statement title's where they're at. Are you still having to scroll down the page to see all sliders, that's why you want to smash this down to be as short as possible?

So the slider can't be presented like this?

https://community.qualtrics.com/XMcommunity/discussion/comment/40403#Comment_40403So the slider can't be presented like this one?

https://community.qualtrics.com/XMcommunity/discussion/comment/40219#Comment_40219Hi, this solution works but not for the mobile view. Any idea how to force a shorter slider length in the mobile view as well?

Hi adrihout
You can use the below code and change the width as per your need.
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

if (window.matchMedia("(min-width: 720px)").matches) {
  /* Code to execute */
jQuery("#" + this.questionId + " .QuestionBody").width(600);
jQuery("#" + this.questionId + " .statement-container").css("padding-top",6);

 
 } else {
  /* Code to execute */
  jQuery("#" + this.questionId + " .QuestionBody").width(300);
jQuery("#" + this.questionId + " .statement-container").css("padding-top",6);

 }


});

Hope this helps!

https://community.qualtrics.com/XMcommunity/discussion/comment/48787#Comment_48787Thank you @Deepak but it still doesn't work for the mobile view....

Hi adrihout it does work!
Including the screenshot as well from mobile, not aware where you're facing issue.