javascript - jQuery Mobile dual range slider working but buggy

Question

I was able to make dual range slider by placing slider on top of each other on jQuery Mobile framework.

Also javascript is set so that left thumb doesn't go above right one.

However that function is a bit buggy and I was wondering if anyone had a good solution to this problem.

Below is an example:

$('#buying_slider_min').change(function() {
    var min = $(this).val();
    var max = $('#buying_slider_max').val();
    if(min > max) {
      $('#buying_slider_max').val(min);
      $('.maxBuyingSlider').slider('refresh');  
    }
});
$('#buying_slider_max').change(function() {
    var min = $('#buying_slider_min').val();
    var max = $(this).val();
    if(min > max) {
      $('#buying_slider_min').val(max);
      $('.minBuyingSlider').slider('refresh');  
    }
});

Check it HERE

Answer 1

Modify the script part like this:

$('#buying_slider_min').change(function() {
    var min = parseInt($(this).val());
    var max = parseInt($('#buying_slider_max').val());
    if (min > max) {
        $(this).val(max);
        $(this).slider('refresh');
    }
});
$('#buying_slider_max').change(function() {
    var min = parseInt($('#buying_slider_min').val());
    var max = parseInt($(this).val());

    if (min > max) {
        $(this).val(min);
        $(this).slider('refresh');
    }
});

Updated fiddle - http://jsfiddle.net/NkjQr/12/

Edit - Code explanation:

1) The value of the slider taken using val() method is a string and earlier you were comparing those strings,wherein you should be comparing numbers.Since strings were compared,the code was not working the way it should be.Converted the strings to number and then did the min and max comparison.

2) If slider_min value goes beyond slider_max value,slider_min value should be kept at slider_max value.Similarly if slider_max value goes under slider_min value,slider_max value should be kept at slider_min value.These are handled within the respective if statements