CODEWITHSUNDEEP
javascriptjqueryjquery-ui
user39980
user39980

Reputation:

Using offset and jQuery slider

I am using offset() with the jquery slider and I am so close to achieving my goal, but it is off slighty. I have it animating using animate to the top CSS coordinates but if you check out: http://www.ryancoughlin.com/demos/interactive-slider/index.html - you will see what it is doing. My goal is to have it fadeIn() and display the value to the right of the handle. i know I can offset the text from the handle using a simple margin:0 0 0 20px.

The part is aligning #current_value to the right of the handle. Thoughts? var slide_int = null;

$(function(){

    $("h4.code").click(function () {
        $("div#info").toggle("slow");
    });

    $('#slider').slider({
        animate: true,
        step: 1,
        min: 1,
        orientation: 'vertical',
        max: 10,
        start: function(event, ui){
            $('#current_value').empty();
            slide_int = setInterval(update_slider, 10); 
        },
        slide: function(event, ui){
            setTimeout(update_slider, 10);  
        },
        stop: function(event, ui){
            clearInterval(slide_int);
            slide_int = null;
        }
    }); 
});
function update_slider(){
    var offset = $('.ui-slider-handle').offset();
    var value = $('#slider').slider('option', 'value');

    $('#current_value').text('Value is '+value).css({top:offset.top });
    $('#current_value').fadeIn();

}

I know I could use margin to offset it to match, but is there a better way?

Upvotes: 4

Views: 5221

Answers (3)

Esa Mäkinen
Esa Mäkinen

Reputation: 160

I had the same problem: the visible value in Jquery Ui slider lags behind from internal value. Fixed the problem by changing the slider event from "slide" to "change".

Upvotes: 2

tghw
tghw

Reputation: 25303

There are two problems. The first, like Prestaul said, the slider event fires at the "beginning" of the move, not the end, so the offset is wrong. You could fix this by setting a timeout:

$(function(){
    slide: function(event, ui){
        setTimeout(update_slider, 10);
    },
    ...
});
function update_slider()
{
    var offset = $('.ui-slider-handle').offset();
    var value = $('#slider').slider('option', 'value');
    $('#current_value').text('Value is '+value).animate({top:offset.top }, 1000 )
    $('#current_value').fadeIn();
}

The second problem is that the move is instantaneous, while the animation is not, meaning that the label will lag behind the slider. The best I've come up with is this:

var slide_int = null;

$(function(){
    ...
    start: function(event, ui){
        $('#current_value').empty();
        // update the slider every 10ms
        slide_int = setInterval(update_slider, 10);
    },
    stop: function(event, ui){
        // remove the interval
        clearInterval(slide_int);
        slide_int = null;
    },
    ...
});

function update_slider()
{
    var offset = $('.ui-slider-handle').offset();
    var value = $('#slider').slider('option', 'value');

    $('#current_value').text('Value is '+value).css({top:offset.top });
    $('#current_value').fadeIn();
}

By using css instead of animate, you keep it always next to the slider, in exchange for smooth transitions. Hope this helps!

Upvotes: 7

Prestaul
Prestaul

Reputation: 85145

You just need to use a different event. "slide" fires before the handle is moved so your value is ending up at the previous handle position. Try the "change" event and see if that gets you there.

Upvotes: 0

Related Questions