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

score 24 · Accepted Answer · answered Sep 15 '11 at 12:45

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

This has the same problem mine does, if the slider is created off-screen the label is above the handle, not below. Add margin-top: 1000px; to your slider CSS and you will see the problem. — Illuminati, Aug 11 '15 at 17:29

score 7 · Answer 2 · edited May 23 '17 at 12:32

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/

score 2 · Answer 3 · answered Jun 12 '12 at 12:19

2

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

answered Jun 12 '12 at 12:19

micrub

740
8
17

this wasn't a direct answer to the original question, but it proved to be exactly what i needed. thank you! – Greg Detre Jan 25 '13 at 10:41

score 2 · Answer 4 · answered Feb 18 '14 at 10:10

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.

ykay says Reinstate Monica · Answer 5 · 2016-02-02T09:17:55.327

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

score 1 · Answer 6 · answered Mar 24 '17 at 08:50

1

you can find it so easily in the official documentation of jQyeryUI slider page in the following example

http://jqueryui.com/slider/#custom-handle

answered Mar 24 '17 at 08:50

mustafa-elhelbawy

530
6
21

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

6 Answers6

Update

Linked