事件更改时Jquery滑块更新值

我有以下代码，我正在使用它来基于滑块值计算服务的价格。事件更改时Jquery滑块更新值

它运作良好，除了PriceVal不实时更新。只有当用户从滑块上点击鼠标时它才会更新。

有谁知道我可以如何在滑块滑动时实时更新它？

页可以在http://www.voxlogic.net/pricing/

$(function() { 
//document.getElementById("f1").reset(); 
$(":range").rangeinput({ progress: true, max: 100, value:1 }); 
$(":range").change(function(){ 
    var sliderVal = this.value; 
    calculatePrice(sliderVal);  
}); 
$(":range").keyup(function(){ 
    var sliderVal = this.value; 
    if (sliderVal==""){ 
     $("#priceVal").html(''); 
} 
else 
     { 
      //check if value is from 1..25 range and correct otherwise 
      if (isNaN(sliderVal)){sliderVal=1;} 
      if (sliderVal<1){sliderVal=1;} 
      if (sliderVal>25){sliderVal=25;} 
      this.value = sliderVal; 
      calculatePrice(sliderVal); 
     } 
    }); 

    $(":range").keydown(function(){ 
     var sliderVal = this.value; 
     calculatePrice(sliderVal);  
}); 
}); 

function calculatePrice(sliderVal){ 
    if (isNaN(sliderVal)){sliderVal=1;} 
    if (sliderVal<1){sliderVal=1;} 
    if (sliderVal>25){sliderVal=25;} 
    var priceVal; 
    if (sliderVal<=9){ 
     priceVal = sliderVal*6; 
    } 
    else if ((sliderVal>9)&&(sliderVal<=19)){ 
     priceVal = 9 * 6 + (sliderVal-9) * 4.5;   
    } 
    else if (sliderVal>19){ 
     priceVal = 9 * 6 + 10 * 4.5 + (sliderVal-19) * 3.6; 
    } 
    $("#priceVal").html('&pound;'+priceVal.toFixed(2)); 
} 
});

来源

2012-09-02 Chris

可能的复制http://stackoverflow.com/questions/7523864/ui-slider-with-text-box-input – Gandalf

不是重复 – Alexander

您需要的onSlide事件

onSlide绑定

滑动发生时。您可以通过返回false或为事件对象调用preventDefault（）来取消操作。请注意，分配此事件侦听器会影响性能，并可能影响滑动体验的平滑性。

而不是change事件。

change

范围值之后被改变。如果通过单击底层滑块来滑动范围，则这是唯一正在触发的事件。请注意，该名称与jQuery的更改方法相同，您可以直接将该事件绑定到该函数。对于其他事件，您必须使用绑定方法。这会导致更流利的语法，如上例所示。

您可以在您电话$.rangeinput做到这一点：

$(":range").rangeinput({ 
    progress: true, 
    max: 100, 
    value: 1, 
    onSlide: function(evt, val) { 
    calculatePrice(val); 
    } 
});

或之后使用bind。

$(":range").bind('onSlide', function(evt, val){ 
    calculatePrice(val); 
});

来源

2012-09-02 13:29:39 Alexander

嗨亚历山大，这个工作一种享受！非常感谢：-） – Chris

观看你需要来装到幻灯片事件：

$(".SliderDiv").slider({ min: 0, max: 16, step: .25, slide: SliderSlide, animate: true }); 

// ---- SliderSlide --------------------------- 
// 
// user is dragging or clicking a slider 

function SliderSlide(event, ui) 
{ 
    var Value = ui.value 
    var $Sender = $(ui.handle); 
    var $Row = $Sender.parentsUntil("table", "tr"); 
    ... 
    // Call your function here

来源

2012-09-02 13:11:52

事件更改时Jquery滑块更新值

回答

相关问题