Encontré un complemento deslizante ionRange aquí está la demostración http://ionden.com/a/plugins/ion.rangeslider/demo_interactions.html
Buscando agregar transición onUpdate He agregado transición en el control deslizante y en la barra deslizante a través de la transición CSS
.irs--big .irs-handle { transition: all ease .2s; } .irs--big .irs-bar--single { transition: all ease .2s; }Pero solo funciona en el evento onChange, no en onUpdate.
onUpdate cambia abruptamente el valor sin efectos
Lo que está sucediendo aquí es que el evento onUpdate destruye/elimina todo el control deslizante del dom y crea un nuevo control deslizante con los nuevos valores (los actualizados). Supongo que está capturando los nuevos valores de algún mecanismo de entrada, por ejemplo, el usuario ingresa el precio en un campo de entrada y presiona enviar, que luego usa para actualizar el control deslizante.
Ahora hay algunas maneras en que podemos lograr lo que quieres. Primero, edite los archivos js del complemento en sí, pero eso es mucho trabajo y no obtenemos el cdn gratuito que proporcionan. Dos, actualice el control deslizante con valores antiguos y luego cambie manualmente el posicionamiento del control deslizante con js. En tercer lugar, olvídese del evento onUpdate y cree su propio evento CustomeUpdate . Asi que...
$("#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 })Agregue "px" a los anchos numéricos que necesite, ya que he sido un poco pésimo. Mi punto es transmitir la idea con el pseudocódigo jquerish.