What's happening in this scenario is that the onUpdate event is removing the entire slider from the DOM and replacing it with a new one containing updated values. It appears that you are retrieving these new values from some form of input, such as a user entering a price into a field and submitting it for use in updating the slider.
There are several approaches we can take to achieve your desired outcome. First, we could directly edit the plugin's JavaScript files, but this would require extensive work and forego the benefits of using the free CDN they provide. Second, we could update the slider with the old values and then manually adjust its position using JavaScript. Finally, we could disregard the onUpdate event altogether and create our own custom CustomUpdate 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"; //set a value like 34
var newWidth = calib*$("input").value();
$("irs-bar.irs-bar--single").width(newWidth); //this will smoothly transition with CSS transitions
$(".irs-handle.single").left(newWidth+15); // 15 represents half of the draggable circle's width
})
Remember to append "px" to the numeric widths where necessary, as I've been somewhat careless. The main goal here is to convey the concept through jQuery-like pseudo code.