Question

我有以下代码，我用它来计算基于滑块值的服务价格。

除了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));
}
});

Answer 1

您需要绑定onSlide事件

<强> onSlide

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

而不是change事件。

<强> change

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

您可以在$.rangeinput电话中执行此操作：

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

或之后使用bind。

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

Answer 2

您需要连接到幻灯片事件：

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

事件更改时Jquery滑块更新值

2 个答案: