Spacing between slider and labels | XM Community
Skip to main content
Solved

Spacing between slider and labels

  • December 26, 2018
  • 6 replies
  • 618 views

Forum|alt.badge.img+1
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. !

Best answer by PraDeepKotian_XM

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.

6 replies

PraDeepKotian_XM
QPN Level 5 ●●●●●
Forum|alt.badge.img+21
  • QPN Level 5 ●●●●●
  • Answer
  • December 27, 2018
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.

Forum|alt.badge.img+1
@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_XM
QPN Level 5 ●●●●●
Forum|alt.badge.img+21
  • QPN Level 5 ●●●●●
  • January 11, 2019
> @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

  • July 9, 2019
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!!

  • September 25, 2020

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.


  • September 25, 2020

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.