javascript - Angular 4 : Slider change should trigger separate functions for separate range values

Question

我在 Angular 4 中使用 slider 。下面是我的 HTML 代码:

  <div oninput="range1value.value = range1.valueAsNumber" id="range">
                    Actual/Optimised
                    <input name="range1" type="range" step="1" min="1" max="3" value="1" (onRangeChanged)="onRangeChange"> Adjusted
                    </div>

我希望 slider 在最大范围时触发函数 Max()，当它在最小范围时触发单独的函数 Min()。请帮忙。

问候

你好

Answer 1

你可以通过在组件中做一个函数来实现这个东西。

组件

在下面的函数中，你可以做任何你想做的事。

  onChangeRange(rangeValue: any){
    console.log(rangeValue);
    if(rangeValue == 1){
       //do something
     }else if(rangeValue == 3){
       //do something else
     }else{
       //do something else
     }
  }

HTML

<input name="range1" type="range" step="1" min="1" max="3" [(ngModel)]="rangeValue" (change)="onChangeRange(rangeValue)"> Adjusted

解释

rangeValue:这包含范围的值。

onChangeRange:这是一个在您更改范围时调用的函数。