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

6

17

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 ]);
        }
});
Ly answered 14/9, 2011 at 12:0 Comment(0)
B
25

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

Beaubeauchamp answered 15/9, 2011 at 12:45 Comment(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.Rodger
L
7

I would just put the labels inside the handles, instead of repositioning them all the time, like in this answer: https://mcmap.net/q/692201/-jquery-ui-slider-move-the-value-along-with-the-handle

$("#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/

Lifeblood answered 2/4, 2013 at 2:52 Comment(0)
T
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

Toffeenosed answered 12/6, 2012 at 12:19 Comment(1)
this wasn't a direct answer to the original question, but it proved to be exactly what i needed. thank you!Bavardage
P
2

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.

Phanerozoic answered 18/2, 2014 at 10:10 Comment(0)
P
2

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))
    }
});
Prologize answered 19/8, 2015 at 11:16 Comment(0)
S
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

Stoker answered 24/3, 2017 at 8:50 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.