Question

I am using the JQuery slider UI Widget. I am getting weird problems when using two sliders in the same form. I tried using only the slide option. This creates a slider that can be dragged all the way to the end, but the value of the slider is less than the full value of the slider. This problem is more apparent the faster you slide the slider.

I then added a change option. The same function as the slide function. This fixed my first problem. But now every time I slide to a value, when I release, the value is incremented or decremented by 1. I can’t explain this at all. Code is below.

$(function() {
$( "#minTixSlider, #minPriceSlider"  ).slider({
        value:0,
        min:0,
        max: 100,
        step: 1,
        slide: function() {
            $( "#minTix" ).val( $( "#minTixSlider" ).slider( "value" ));
            $( "#minPrice" ).val( $( "#minPriceSlider" ).slider( "value" ));                
        },
        change: function() {
            $( "#minTix" ).val( $( "#minTixSlider" ).slider( "value" ));
            $( "#minPrice" ).val( $( "#minPriceSlider" ).slider( "value" ));                
        }

    });

$( "#minTix" ).val( $( "#minTixSlider" ).slider( "value" ));
$( "#minPrice" ).val( $( "#minPriceSlider" ).slider( "value" ));    

});

Answer 1

used the answer to this question. Here is my updated code.

    function updateInputs() {
    $( "#minTix" ).val( $( "#minTixSlider" ).slider( "value" ));
    $( "#minPrice" ).val( $( "#minPriceSlider" ).slider( "value" ));
}
$(function() {
$( "#minTixSlider, #minPriceSlider"  ).slider({
        value:0,
        min:0,
        max: 100,
        slide: function(event, ui){
            setTimeout(updateInputs, 10);},
        change: function(event, ui){
            setTimeout(updateInputs, 10);}
    });

$( "#minTix" ).val( $( "#minTixSlider" ).slider( "value" ));
$( "#minPrice" ).val( $( "#minPriceSlider" ).slider( "value" ));    

});