get value of slider with (change) of particular slider while using multiple sliders

Question

I have multiple slider in a component and i'm using nouislider

<nouislider [connect]="true"  [(ngModel)]="someValue" 
[config]="someKeyboardConfig" (change)="saveRange($event)"></nouislider>

<nouislider [connect]="true"   [(ngModel)]="someValue1" 
[config]="someKeyboardConfig" (change)="saveRange($event)"></nouislider>

component.ts

saveRange(value) {
    console.log('Value changed to', value);
  }

I get value on (change)` but don't know which slider value it is I have 7 slider like this in one page. How to know which sliders value it is. After getting slider range I want to write it in json file

Please suggest me a way here.

Answer 1

You have multiple options here:

1. pass an attribute to your method along with the event. This could look like the following:

HTML:

<nouislider [connect]="true"  [(ngModel)]="someValue" 
[config]="someKeyboardConfig" (change)="saveRange('first', $event)">     
</nouislider>

<nouislider [connect]="true"   [(ngModel)]="someValue1" 
[config]="someKeyboardConfig" (change)="saveRange('second', $event)">    
</nouislider>

JS/TS

saveRange(slider, value) {
   console.log('Value of ' + slider + ' slider changed to', value);
}

2. Simply use 2 methods

HTML:

<nouislider [connect]="true"  [(ngModel)]="someValue" 
[config]="someKeyboardConfig" (change)="saveSecondRange($event)">     
</nouislider>

<nouislider [connect]="true"   [(ngModel)]="someValue1" 
[config]="someKeyboardConfig" (change)="saveFirstRange($event)">    
</nouislider>

JS/TS

saveFirstRange(value) {
   console.log('Value of first slider changed to', value);
}
saveSecondRange(value) {
   console.log('Value of second slider changed to', value);
}