How to add labels over choices on slider nicely | XM Community
Question

How to add labels over choices on slider nicely

  • 8 February 2024
  • 2 replies
  • 87 views

Badge +1

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?


2 replies

Userlevel 3
Badge +11

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.

Badge +1

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