jQuery UI Slider Labels Under Slider

Question

I am limited to using jQuery 1.4.2 and jQuery ui 1.8.5 (this is not by choice, please do not ask me to upgrade to latest versions). I have created a slider that shows the cu

Answer 1

To create a legend, we need to know the width of the slider and the number of elements then divide one against the other:

//store our select options in an array so we can call join(delimiter) on them
var options = [];
for each(var option in el.options)
{
  options.push(option.label);
}

//how far apart each option label should appear
var width = slider.width() / (options.length - 1);

//after the slider create a containing div with p tags of a set width.
slider.after('
' + options.join('
') +'
');

The p tag needs to have the style 'display:inline-block' to render correctly, otherwise each label will take one line or the labels will be stacked up right next to each other.

I have created a post explaining the problem and solution: jQuery UI Slider Legend Under Slider which contains a live demo of this working.