jQuery UI Slider Labels Under Slider

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

    }

});