Slider Labels Above AND Below Slider | XM Community
Skip to main content

Hi, I'm trying to figure out how to get labels both above and below a slider. Similar to the image below.
slider.PNG
Using code from similar questions I am able to get all labels below the slider

   jQuery("ul.labels").insertAfter("div.slider-container:last");

but I haven't figured out how to get some above and some below the slider. Is this doable?

...I haven't even begun tackling whether it's also possible to have variable spacing of labels similar to the labels below in the image 😬....

Hi _Susan_,
Are you just wanting to move a second row of labels down to the bottom like so?
image.pngIf so you should be able to use the eq() filter:
//to move the top set of labels
jQuery(".labels-container ul").eq(0).insertAfter("div.slider-container:last");

//to move the bottom set of labels
jQuery(".labels-container ul").eq(1).insertAfter("div.slider-container:last");
Good luck!

EDIT: you could probably do the same to experiment with different spacing on individual labels too:
//move the 2nd top label left 50 pixels
jQuery(".labels-container ul li span").eq(1).css("margin-left", "50px");
//move the 4th top label left 70 pixels
jQuery(".labels-container ul li span").eq(3).css("margin-left", "70px");
//move all of the top set of labels, as previously
jQuery(".labels-container ul").eq(0).insertAfter("div.slider-container:last");

Leave a Reply


Terms & Conditions