Cannot dynamically set start and end value.

[shettayyy]

On click of a button, if I change the [startValue] and [endValue] then the value changes instead of slider moving to the position of the value.

Below is the code:

<ng2-slider
        min="0"
    max="25"
    startValue="{{startVal}}"
    endValue="{{endVal}}"
    stepValue="1"
    skin="elegance-2"
    [normalHandlerStyle]="{ 'background-color': '#ef4f49'}"
    [slidingHandlerStyle]="{
        'border-radius': '50%',
        'background-color': '#ef4f49'
    }"
    >
</ng2-slider>

<button (click)="setSliderVal(10, 20)">Dummy test range slider button</button>

  setSliderVal(start: number, end: number) {
    this.startVal = start;
    this.endVal = end;
  }