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 current value above the slide bar, but what I need now is a way to populate a legend below the slide bar distanced the same as the slider (i.e. if the slider is 100px wide and there are five values the slider will snap every 20px. In this example, I would like the values in the legend to be placed at 20px intervals).

Here is an example of what I want:

Here is the jQuery I have (assimilated from the ui slider demo page):

//select element with 5 - 20 options
var el = $('.select');

//add slider
var slider = $( '<div class="slider"></div>' ).insertAfter( el ).slider({
    min: 1,
    max: el.options.length,
    range: 'min',
    value: el.selectedIndex + 1,
    slide: function( event, ui ) {
      el.selectedIndex = ui.value - 1;
      slider.find("a").text(el.options[el.selectedIndex].label);
    },
    stop: function() {
      $(el).change();
    }
});

slider.find("a").text(el.options[el.selectedIndex].label); //pre-populate value into slider handle.

Solution 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('<div class="ui-slider-legend"><p style="width:' + width + 'px;">' + options.join('</p><p style="width:' + width + 'px;">') +'</p></div>');

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.

Solution 2

The posted solutions are totally workable, but here is another solution that requires no additional plugins and produces this (see fiddle):

Here's how to do it:

1. Initiate the slider.

2. For each of the possible values, append a label element with position: absolute (the slider is already position: relative, so the labels will be positioned relative to the slider).

3. For each label, set the left property to a percentage.

CSS

#slider label {
  position: absolute;
  width: 20px;
  margin-top: 20px;
  margin-left: -10px;
  text-align: center;
}

JS

// A slider with a step of 1
$("#slider").slider({
    value: 4,
    min: 1,
    max: 7,
    step: 1
})
.each(function() {

    // Add labels to slider whose values 
    // are specified by min, max

    // Get the options for this slider (specified above)
    var opt = $(this).data().uiSlider.options;

    // Get the number of possible values
    var vals = opt.max - opt.min;

    // Position the labels
    for (var i = 0; i <= vals; i++) {

        // Create a new element and position it with percentages
        var el = $('<label>' + (i + opt.min) + '</label>').css('left', (i/vals*100) + '%');

        // Add the element inside #slider
        $("#slider").append(el);

    }

});

Solution 3

Been looking for the same thing and ended up with using the jQuery UI Slider by filamentgroup (It works like a charm and looks stable) I think that in time it is planned to be merged into jQuery UI components...

here a ref to the article and example + minimized jsfiddle I did

jQuery UI Slider from a Select Element - now with ARIA Support

This is an example from the Filament Group Lab Article

Working minimized jsfiddle example - Updated and Working

b.t.w if one want to use a simpler slider (without range) all is needed to be done is remove the second select element

---

Another nice plugin that does the job: jslider

Solution 4

One more solution with custom labels and without fixed label size.

JS Bin

Solution 5

I have a simple solution for a slider with labels using only jquery.

You simply set up your div where you want the slider to go

<div class="sliderWithLabels" id="mySlider1"></div>

Then call the setup method which will add the labels to the slider at the relevant indexes.

// setupSlider(divId, labelArray, initialIndex);
setupSlider('mySlider3', ["label1", "label2", "label3", "label3"], 3);

see the code pen below for full code

https://codepen.io/larnott/pen/WNeErqE

View more solutions

Comments

[Mark]

Very nice. One minor correction: var el = $('<label>'+(i+opt.min)+'</label>').css('left',(i/vals*100)+‌​'%');

[chrisfargen]

Thanks, Mark. Corrected above.

[Vijeet Deliwala]

Great...One small Correction - This works for step=1....for step>1 ,we can change the for line to : for (var i = 0; i <= vals; i+=opt.step)

[Luc Laverdure]

I'd recommend replacing the "display:inline-block" by a "float:left" for IE6 & 7 compatibility. Excellent post however!

[Skippy le Grand Gourou]

It might be as obvious for some as it might be helpful for others : to make this work I had to add $(document).ready(function() { on top of the JS code (and of course to close it with an additional }) before });).

[Josh Crozier]

If you want to prevent the numbers from overlapping, see this answer