jQuery UI Slider Labels Under Slider

Solution 1:

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 2:

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 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