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

How to add labels over choices on slider nicely

  • February 8, 2024
  • 2 replies
  • 392 views
Z
Level 1 ●
Forum|alt.badge.img+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

Umang Upadhyay
QPN Level 4 ●●●●
Forum|alt.badge.img+27
  • Umang Upadhyay
  • QPN Level 4 ●●●●
  • February 8, 2024

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.

Z
Level 1 ●
Forum|alt.badge.img+1
  • zknim
  • Author
  • Level 1 ●
  • February 9, 2024

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?

Terms & ConditionsAccessibility statement