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:          


        

Answer 1

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

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

And you're good to go

Answer 2

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.

Answer 3

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.

Answer 4

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