I'm facing an issue with implementing multiple sliders on a single page where each slider should have different range values. Here is a snippet of my HTML:
<div *ngFor="let property of comepleteFilters">
<h5>{{property.propertyName}}</h5>
<div *ngIf="setSliderValues(property); else renderCheckbox">
<nouislider #slider [min]="minSliderValue" [max]="maxSliderValue" [step]="stepSliderValue" [config]="conf" [tooltips]="[true, true]" (end)="onSliderChange($event)"></nouislider>
</div>
And here is a snippet of my TypeScript file:
conf: any = {
start: [0, 10],
behaviour: 'drag'
};
.. ..
setSliderValues(sliderFilter: FilterList) {
if (sliderFilter.propertyName === 'enginePower' || sliderFilter.propertyName === 'wheelBase') {
this.minSliderValue = sliderFilter.propertyValues[0];
this.maxSliderValue = sliderFilter.propertyValues[sliderFilter.propertyValues.length - 1];
this.stepSliderValue = 5;
return true;
} else {
return false;
}
}
Despite setting different values for each slider, all sliders end up with the same range values as the first slider. I even manually hardcoded values for each slider to test if the issue persists, but the problem remained. I am using Angular 6.