I'm trying to set my slider-thumb of the Ngx-slider based on a dynamic value, retrieved from an API call.

First I make an init of the variables.

minAgeValue: number = 0;
maxAgeValue: number = 0;

Second I set the min and max value based on a GET request:

const getfilterage = environment.apiUrl + '/GetAgesForFilter';
this.http.get<any>(getfilterage).subscribe({
  next: (response) => {
    this.minAgeValue = Math.min.apply(null, response.data);
    this.maxAgeValue = Math.max.apply(null, response.data);
  },
});

And this is how i fill the fields in HTML with the variables:

<input type="number" id="min-Age" class="yearField" [(ngModel)]="minAgeValue" />
<label> t/m </label>
<input type="number" id="max-Age" class="yearField" [(ngModel)]="maxAgeValue" />
<div class="custom-ngx-slider">
  <ngx-slider
    id="ngx-slider-custom"
    [(value)]="minAgeValue"
    [(highValue)]="maxAgeValue"
    [options]="optionsAge"
  ></ngx-slider>
</div>

My problem is that sometimes the slider thumb is set correctly with the expected values. And sometimes (most of the times) the slider thumb is set to the floor value. Check here for an example of what I mean