Slider won't update properly

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 开发者_StackOverflowslide 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" ));    

});

---

Have you tried removing the step: 1, line altogether?

Step by definition on jquery doc says: "step: A function to be called after each step of the animation." This may be where the extra jump is occurring.

---

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" ));    

});