Question

我正在使用JQuery滑块UI Widget。当使用相同形式的两个滑块时，我遇到了奇怪的问题。我尝试过只使用幻灯片选项。这将创建一个可以一直拖动到末尾的滑块，但滑块的值小于滑块的整个值。滑动滑块的速度越快，此问题就越明显。

然后我添加了一个更改选项。与滑动功能相同的功能。这解决了我的第一个问题。但是现在每次我滑动到某个值时，当我释放时，该值会递增或递减1.我根本无法解释。代码如下。

$(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

您是否尝试完全删除step: 1,行？

jquery doc上的逐步定义说： “step：在动画的每一步之后调用的函数。”这可能是发生额外跳跃的地方。

Answer 2

使用了这个question的答案。这是我更新的代码。

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

});

滑块无法正常更新

2 个答案: