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

Strange values indeed. This is more simplified and works like a charm:

$(document).ready(function(){

    var valuemin = valuemax = 0;

    $('#clarityslider').slider({
        min:    10,
        max:    18,
        range:  true,
        values: [10, 18],
        slide:  function(event, ui) {
            valuemin = ui.values[0];
            valuemax = ui.values[1];
            $(this).next().val(valuemax);
            $(this).prev().val(valuemin);
        }
    });
});

Good luck with what you are building!