2011-03-24 44 views
0

我正在使用JQuery滑块UI小部件。当在同一表单中使用两个滑块时,我会遇到奇怪的问题。我试着只使用幻灯片选项。这会创建一个可以拖动到最后的滑块,但滑块的值小于滑块的全部值。滑动滑块的速度越快,此问题就越明显。滑块不会正确更新

然后我添加了一个更改选项。与幻灯片功能相同的功能。这解决了我的第一个问题。但是现在每当我滑动到一个值时,当我释放时,值就会增加或减少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"));  

}); 

回答

0

使用此问题的答案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"));  

}); 
0

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

按照jquery doc定义的步骤说: “step:在动画的每个步骤之后调用的函数”。这可能是额外跳跃发生的地方。

+0

步骤 - 确定每个间隔的大小或数量或滑块在最小值和最大值之间执行的步骤。滑块的完整指定值范围(最大 - 最小)需要被该步骤均匀分割。 代码示例 使用指定的步骤选项初始化滑块。 $(“.selector”).slider({step:5}); 在init之后获取或设置步骤选项。 // getter var step = $(“.selector”).slider(“option”,“step”); // setter $(“.selector”).slider(“option”,“step”,5); 其他小部件可能有所不同。 – Lumpy 2011-03-24 16:28:05