1

我在这里找到了一个插件 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 它突然改变值而没有影响

4

1 回答 1

0

这里发生的是，该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”添加到数字宽度，因为我有点糟糕。我的意思是用 jquerish 伪代码来理解这个想法。

于 2021-10-15T06:57:38.823 回答