Jquery滑块更新事件更改的值答案

【问题标题】：Jquery slider update value on event changeJquery滑块更新事件更改的值
【发布时间】：2012-08-27 12:01:40
【问题描述】：

我有以下代码，用于根据滑块值计算服务价格。

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

【问题讨论】：

可能重复stackoverflow.com/questions/7523864/…

标签： javascript jquery jquery-events jquery-tools

【解决方案1】：

你需要绑定onSlide事件

onSlide

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

而不是 change 事件。

change

范围值改变后。如果您通过单击底层滑块来滑动范围，这是唯一被触发的事件。请注意，名称与 jQuery 的 change 方法相同，您可以直接将事件与该函数绑定。对于其他事件，您必须使用 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);
});

【讨论】：

【解决方案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

【讨论】：