How to add labels over choices on slider nicely | XM Community
Skip to main content

Hi

I wish to add the labels (e.g. Extremely hello) on middle top position over options (e.g. 1).

This is what my current question looks like,

and this is what I want my question to look like.

How can I go about doing this?

Hi @zknim,

After you have configured your slider, navigate to the "Look & Feel" section. Then click on "Add Custom CSS".

Add the following CSS code to place labels over the slider

.q-slider .slider-tick-label { position: absolute; top: -25px; /* Adjust this value to position the label properly */ transform: translateX(-50%); white-space: nowrap; }

Preview your survey to see how the labels appear over the slider. If necessary, adjust the CSS values (such as top or transform) to position the labels exactly where you want them.


Am I supposed to include  /* Adjust this value to position the label properly */?
Nonetheless, nothing seems to be changing even after removing ^, as well as changing the top and transform values. 

Would there be any other way to solve this?


Leave a Reply