Multiple sliders on a page influence each other

I add multiple sliders to a page:

<div class="row form-row" *ngFor="let option of categoricalOptions"> ... <categorical-slider [value]="option.defaultStringValue" [values]="option.stringValues" (sliderPosition)="onCategoricalOptionChange(option, $event)"></categorical-slider> </div> <div class="row form-row" *ngFor="let option of continuousOptions"> ... <continuous-slider [value]="option.defaultDoubleValue" [min]="option.minDoubleValue" [max]="option.maxDoubleValue" (sliderValue)="onContinuousOptionChange(option, $event)"></continuous-slider> </div>

with categorical-slider <div class="slider"><nouislider [config]="sliderConfig" [(ngModel)]="sliderValue" (ngModelChange)="onChange($event)"></nouislider></div>

and continous-slider <div class="slider"><nouislider [config]="sliderConfig" [(ngModel)]="value" (ngModelChange)="onChange($event)"></nouislider></div>

The sliders influence each other after being dragged once on dragging and tapping. Key events do not influence other sliders. This behaviour is not intended!

Here a screen record of the mentioned behaviour: screen_record-1.zip

[saverag]

@Gagaro thanks!

[cmaart]

Clicking on a handle with version 10.0.0 has the issue that it’s not release properly. And you can drag anywhere on the page.

I made a plunker to reproduce it: https://plnkr.co/edit/HyFbhD?p=preview

As @Gagaro wrote, by changing the nouislider version from 10.0.0 to 9.0.0 in the systemjs config file, fixes the issue.