jQuery UI Slider: move the value along (with) the handle

Question

I used the jQuery UI slider component in my page to set a range of prices. I can also use their ui.values[] to set and show the new values in other divs.

How can I make to see the new value under the handle. I.e. if I moved the handle to $100, I want to set the "$100" text right under that handle.

BTW, I use the range version - to set a range of prices, so I got TWO handles on my slider (min & max).

var minPriceRange=100;
var maxPriceRange=500;
$( "#priceRangeSlider" ).slider({
        range: true,
        min: minPriceRange,
        max: maxPriceRange,
        step: 10,
        values: [ minPriceRange, maxPriceRange ],
        slide: function( event, ui ) {
            ("#fromRangeText").text("$" + ui.values[ 0 ]);
            $("#toRangeText").text("$" + ui.values[ 1 ]);
        }
});

Answer 1

You may use the .position utility function from jQuery UI to position the labels:

$("#slider").slider({
    ...
    slide: function(event, ui) {
        var delay = function() {
            var handleIndex = $(ui.handle).data('index.uiSliderHandle');
            var label = handleIndex == 0 ? '#min' : '#max';
            $(label).html('$' + ui.value).position({
                my: 'center top',
                at: 'center bottom',
                of: ui.handle,
                offset: "0, 10"
            });
        };

        // wait for the ui.handle to set its position
        setTimeout(delay, 5);
    }
});

See it action: http://jsfiddle.net/william/RSkpH/1/.

Answer 2

I would just put the labels inside the handles, instead of repositioning them all the time, like in this answer: https://stackoverflow.com/a/7431057/1250436

$("#slider").slider({
    range: true,
    min: 100,
    max: 500,
    step: 10,
    values: [100, 500],
    animate: 'slow',
    create: function() {
        $('#min').appendTo($('#slider a').get(0));
        $('#max').appendTo($('#slider a').get(1));
    },
    slide: function(event, ui) { $(ui.handle).find('span').html('$' + ui.value); }
});

Update

This doesn't work in Chromium for Linux. A strange gfx error occurs.

See the working demo: http://jsfiddle.net/ohcibi/RvSgj/2/

Answer 3

change => This event is triggered on slide stop, or if the value is changed programmatically (by the value method). Takes arguments event and ui. Use event.originalEvent to detect whether the value changed by mouse, keyboard, or programmatically. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(this).slider('values', index) to get another handle's value.

http://docs.jquery.com/UI/Slider#event-change

Answer 4

I was pursuing the same goal and i decided to go with Bootstrap's tooltips. You can try the code on this JSFiddle.

$('#slider').slider({
    range: true,
    min: -60,
    max: 60,
    values: [ init_start_at, init_end_at ],
    slide: function(event, ui) {
        // Allow time for exact positioning
        setTimeout( function(){
            $(ui.handle).attr('title', ui.value + '°C').tooltip('fixTitle').tooltip('show');
        }, 5);
    },
    create: function( event, ui ) {
        var target = $(event.target);
        var handles = $(event.target).find('a');
        var container, wait;

        // Wait for the slider to be in position
        (wait = function() {
            if ((container = target.parents('.content')).length != 0) {
                handles.eq(0).tooltip({animation: false, placement: 'top',trigger: 'manual', container: container, title: init_start_at + ' °C'}).tooltip('show');
                handles.eq(1).tooltip({animation: false, placement: 'bottom',trigger: 'manual', container: container, title: init_end_at + ' °C'}).tooltip('show');
            } else {
                setTimeout( wait, 50 );
            }
        })();
    }
});

Hope it helps someone.

Answer 5

It's possible to create a nice slider by including bootstrap tooltips. Here's an updated version of the slider using bootstrap tooltips. http://jsfiddle.net/ykay/jL044k1c/

function slide(event, ui) {
    setTimeout(function () {
        $(ui.handle).attr('title', ui.value).tooltip('fixTitle').tooltip('show');
    }, 0);
}
function create(event, ui, start, end) {
    var handles = $(event.target).find('span');
    handles.eq(0).tooltip({animation: false, placement: 'top', trigger: 'manual', container: handles.eq(0), title: start}).tooltip('show');
    handles.eq(1).tooltip({animation: false, placement: 'top', trigger: 'manual', container: handles.eq(1), title: end}).tooltip('show');
}
$('#slider').slider({
    range: true,
    min: 0,
    max: 100,
    values: [20, 80],
    slide: function (event, ui) {
        slide(event, ui)
    },
    create: function (event, ui) {
        create(event, ui, $(this).slider('values', 0), $(this).slider('values', 1))
    }
});