使用多个滑块时，使用（更改）特定滑块获取滑块的值

Question

我在组件中有多个滑块，我正在使用<nouislider [connect]="true" [(ngModel)]="someValue" [config]="someKeyboardConfig" (change)="saveRange($event)"></nouislider> <nouislider [connect]="true" [(ngModel)]="someValue1" [config]="someKeyboardConfig" (change)="saveRange($event)"></nouislider>

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

component.ts

.body

我得到了值（改变）`但是不知道它是哪个滑块值我在一个页面中有这样的7个滑块。如何知道哪些滑块重视它。 获得滑块范围后，我想在json文件中写入它

请在这里建议我。

Answer 1

这里有多个选项：

1。将属性与事件一起传递给您的方法。这可能如下所示：

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。只需使用2种方法

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);
}