Seiyria/bootstrap slider moving back to start when max,min value changes

Question

I am having an issue with the bootstrap slider. I have three sliders which work together. The first and third sliders are used to calculate a value for the second slider. The min,max values of the second slider are determined through the first and third slider.

My problem is, if I have the second slider dragged all the way (i.e, 15) to the max value and the max value changes (i.e from 15 to 18) by dragging the sliders of the first or third slider, the second slider goes back to its starting position instead of staying on the previous max value (15) and letting me drag it to the new max value (18).

The value does sticks (i.e 15) but the slider it self just shifts back to the start.

Here is the slider code. I am using the Angular version of it.

  <div class="col-md-4 slider-col">
<label [translate]="'LABEL_TEXT.DOWN_PAYMENT'"></label>
<div class="value">${{ downPayment || 0 | number: "1.0-0" }}</div>
<div class="mv-slider">
<mv-slider
  [(value)]="downPayment"
  [min]="product.downPayment.min"
  [max]="product.downPayment.max"
  enabled="true"
  step="100"
  refresh="{ useCurrentValue: false }"
  (slideStop)="getPricingDetail()"
></mv-slider>