Community Groups are officially here!
We've released Groups, a new feature that enables us to connect community members of similar industries and interests in a shared, private space. You can check out all of the details here, including information about who can join, how to join, and what Groups are currently offered. Please leave your feedback through this Community Groups Feedback Survey.

Spacing between slider and labels

MauroUsabilitySci
MauroUsabilitySci New York, NYCommunity Member, Qualtrics Brand Admin Qubie ✭

I am trying to decrease the space between the slider scale and the labels at each end, as there is a significant amount of space, which makes the relationship between the slider and the labels unclear to the respondent. Does anyone have any suggestions? Below is a screenshot of what the slider currently looks like for reference. Thanks.

Tagged:

Best Answer

  • PraDeepKotian_Ugam
    PraDeepKotian_Ugam Mumbai, IndiaCommunity Member, Qualtrics Brand Admin Superuser ✭✭✭✭
    edited December 2018 Accepted Answer

    Hi @MauroUsabilitySci ,

    To decrease the space between the slider and and the labels you can add below code in the custom css.

    <style type="text/css">
    .JFEScope .Skin .q-slider .statement-container {    display: none; }
    </style>
    

    Note: Here I assume you are not considering any choice labels.

Answers

  • MauroUsabilitySci
    MauroUsabilitySci New York, NYCommunity Member, Qualtrics Brand Admin Qubie ✭

    @PraDeepKotian_Ugam Thank you for your help! That code did work to decrease the spacing between the slider and the labels; however, now there is no spacing and the labels are overlapping the sliding scale (see image). Do you have any suggestions on how to create a small amount of space separating the labels and the axis?

  • PraDeepKotian_Ugam
    PraDeepKotian_Ugam Mumbai, IndiaCommunity Member, Qualtrics Brand Admin Superuser ✭✭✭✭

    @MauroUsabilitySci said:
    @PraDeepKotian_Ugam Thank you for your help! That code did work to decrease the spacing between the slider and the labels; however, now there is no spacing and the labels are overlapping the sliding scale (see image). Do you have any suggestions on how to create a small amount of space separating the labels and the axis?

    .JFEScope .Skin .q-slider ul {    
        padding: 6px;   
    }
    

    Add above code it will show some space between the slider and the labels

  • aubrey
    aubrey Community Member Qubie ✭

    Hello - I have a similar challenge but the code did not seem to fix my issue. 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!

  • mihaidricu
    mihaidricu Community Member Qubie ✭

    Thanks for the suggestions... Doing anything to the CSS for slider questions removes the "force response" capability. People can just breeze through the survey and no responses are saved.

  • mihaidricu
    mihaidricu Community Member Qubie ✭

    Perhaps the Qualtrics team can dedicate more time to this issue. I have seen multiple requests on the topic, e.g. reduce the distance between the questions, the distance between the labels and the questions, between the slider and the labels, etc.