jQuery UI Slider - Value returned from 'slide' event on release is different from 'change' value

Question

I have a jQuery UI slider:

$('div.slider').slider({
    range: true,
    step: 250,
    min: 1000,
    max: 500000,
    values: [1000,500000],
    change: function(event, ui){
        console.log($(this).slider('values', 0)+','+$(this).slider('values', 1));
    },
    slide: function(event, ui){
        console.log($(this).slider('values', 0)+','+$(this).slider('values', 1));
    }
});

For some odd reason, when releasing the slider (mouseup) the value changes slightly from what it was. The slide event is returning something different than what the change event is. Anyone have any ideas what might be causing this and how I could solve it?

I'm going to have a pretty intense operation in the callback for the change event (meaning I can't just use sldie), but also need to show the values of the slider live, so I can't use just one or the other.

Here's a fiddle with this oddity in action: http://jsfiddle.net/5W6Zh/

Thanks in advance

Buzzell

It looks like when you grab/slide the slider, it takes the value from the center of the button, but when you let go, it takes the value from the left edge. Also, just clicking on the track never produces this effect, so Im inclined to think that the code behind the button is using different reference points for drag/release – Jughead

Answer 1

we ran into this tonight (and last night, and for the past few months). What we did to fix it was use ui.value and ui.values[0] instead of $("#slider").slider('values',0).

Use this:

change: function(event, ui) {
  $('.values').text(ui.values[0] + ',' + ui.values[1]);
}

Instead of:

change: function(event, ui) {
  $('.values').text($(this).slider('values', 0) + ',' + $(this).slider('values', 1));
}

I forked your jsfiddle and made it work: http://jsfiddle.net/danhixon/9JdhU/1/

Honestly I don't think I would have found the solution without your question and jsfiddle - I kept comparing it to the jquery-ui demo until I found this difference.

Conti

Answer 2

I found a solution! ALWAYS do this on a slide event:

$(this).slider('value', ui.value);

And you're good to go

Presnell

That's it! I love you, dude! – Bally

My slider is only returning [object Object]. – Swifter

perfect! ive been banging my head on my desk today because of this.. i know its a year late, but @nipponese, you are getting [object object] because it is a range slider, try: $(this).slider('values', ui.values[0]); – Gynaecomastia

Wow you are a genius :) Thanks!! – Closelipped

Answer 3

Use ui.value in the slide handler to get a more accurate value.

Reactant

Answer 4

Your min, max and step values look a bit weird, but I guess you just got them mixed up.

I found that the slider doesn't work too well with steps much smaller than 1, so I changed to use integers only and divide afterwards. Never had any problems since then.

Aideaidedecamp

I've changed to the values above and I'm unfortunately still getting this weirdness. :/ – Buzzell