IonRange滑动条onUpdate转换

Question

我找到了一个插件ionRange滑块，这里是演示http://ionden.com/a/plugins/ion.rangeslider/demo_interactions.html

希望添加过渡onUpdate我已经在滑动条手柄和滑动条中添加了CSS过渡

.irs--big .irs-handle {
transition: all ease .2s;
}
.irs--big .irs-bar--single {
transition: all ease .2s;
}

但是它只作用于onChange事件而不作用于onUpdate。

onUpdate它突然改变值而没有效果

Answer 1

这里发生的事情是，onUpdate事件从dom中销毁/删除整个滑动条，并创建一个具有新值(更新值)的新滑动条。我假设，您正在从某些输入机制中捕获新值，例如，用户在输入字段中输入价格并按下提交，然后使用。

更新滑块。现在我们有几种方法可以达到你想要的。第一，编辑插件js文件本身，但这是很多工作，我们没有得到他们提供的免费cdn。第二，用旧值更新滑块，然后用js手动更改滑块定位。第三，忘记onUpdate事件，创建自己的CustomeUpdate事件。所以…

$("#input").click(function(){  
//$("#ion-slider").update();   Don't do this!!!  
$("#ion-slider").trigger("customUpdate"); //Do this instead
})
$("#input").on( "customUpdate", function(){      
var calib = "someNumericInputWidthRatio"; //put a value like 34
var newWidth = calib*$("input").value();
$("irs-bar.irs-bar--single").width(newWidth); //this will transition smoothly if you have transitions in css
$(".irs-handle.single").left(newWidth+15); // 15 is half width of the 
draggable circle
})

添加"px"到你需要的数字宽度，因为我一直有点糟糕。我的观点是通过jquery伪代码来理解这个想法。