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;
}

但它只适用于onUpdate中的onChange事件。

onUpdate它突然改变了值，但没有任何影响

Answer 1

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

现在我们有几种方法可以实现你想要的。其一，编辑插件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“，因为我做得有点糟糕。我的观点是用jquerish伪代码来表达我的想法。