9

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

1
  • 1
    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
    – sottenad
    Commented Feb 2, 2012 at 23:32

4 Answers 4

13

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.

13

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

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

And you're good to go

4
  • 1
    That's it! I love you, dude!
    – Jan K. S.
    Commented Sep 2, 2013 at 0:50
  • My slider is only returning [object Object].
    – rib3ye
    Commented May 20, 2014 at 3:45
  • 2
    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]);
    – kingkode
    Commented Jul 1, 2015 at 19:55
  • 1
    Wow you are a genius :) Thanks!!
    – codeaddict
    Commented Aug 27, 2015 at 2:27
2

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

0

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.

1
  • 1
    I've changed to the values above and I'm unfortunately still getting this weirdness. :/
    – wyqydsyq
    Commented Feb 2, 2012 at 23:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.