jQuery ui slider wrong values?

Question

Example code: http://jsbin.com/eqile3/

This is a slider with 2 handles, 1 for min and 1 for max and on the slide event these values are put in the input fields.

Notice that when sliding the min-handle up and down, the min value is 11 (eventhough I set it to 10), but when sliding up from the min-position it goes from 11 to 10 and then 11. If I slide back down again it goes to 12 and then 11 ...

Pretty weird error, not sure where the cause lies?

Also, when the min-handle is on the first step coming from step 0, so the value being 10, and I then move the max-handle, the min-handle's value is updated correctly. The max-handle has the opposite problem.

The relevant javascript in the example:

$(document).ready(function(){
  $('#clarityslider').slider({step:1,min:10,max:18,range:true,values:[10, 18]});  

  $('#clarityslider').bind('slide', function(ui, event){
    valuemin = $(this).slider('values', 0);
    valuemax = $(this).slider('values', 1);


    $(this).next().val(valuemax);
    $(this).prev().val(valuemin);
  });
});

Answer 1

Wow thank you very much! that really helped me as well, coz I had the exact same problem!

I had:

slide: function(event, ui) {
          var Oldvalue = $('#slider').slider("value");

and changed to

slide: function(event, ui) {
              var Oldvalue = ui.value;