IonRange Slider onUpdate transition

Question

I found a plugin ionRange slider here is the demo http://ionden.com/a/plugins/ion.rangeslider/demo_interactions.html

Looking to add transition onUpdate I have added transition in slider handle and in slider bar via CSS transition

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

But it works only onChange event not in onUpdate.

onUpdate it abruptly changes the value with no effects

Answer 1

What is happening here is that, the onUpdate event destroys/removes the whole slider from the dom and creates a new slider with the new values(updated ones). I am assuming, you are capturing the new values from some input mechanism, e.g. the user enters the price in an input field and presses submit, which you then use to update the slider with.

Now there are a few ways we can achieve what you want. One, edit the plugin js files itself, but that's a lot of work and we don't get the free cdn they provide. Two, update the slider with old values and then manually change the slider positioning with js. Third, forget about the onUpdate event and create your own CustomeUpdate event. So...

$("#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
})

Add "px" to the numeric widths as you need, as I have been a bit lousy. My point is to just get the idea across with jquerish pseudo code.