在Angular2中移动HTML滑块时动态更新变量的值

Question

我在我的angular6应用程序中使用html圆形滑块：https ://www.w3schools.com/howto/howto_js_rangeslider.asp

.html文件中的实现如下所示：

<span style="font-size: 130px;">{{sliderVal}}</span>

<input type="range" #slider min="1" max="10" value="1" class="slider" (change)="onPriceSliderChange(slider.value)">

.ts文件的实现：

import { Component } from '@angular/core';

@Component({
  selector: 'app-sample,
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.scss']
})
export class SampleComponent {
  public sliderVal = 1;
  constructor() { }

  onPriceSliderChange(val) {
    this.sliderVal = val;
  }

}

仅当移动滑块并且我不按下鼠标左键时，sliderVal值才会更改。我想每次移动滑块时都动态地更新sliderVal的值，而不仅是在取消按下鼠标按钮时。我知道如何使用jQuery实现此目的，但我不想将jQuery解决方案与Angular混合使用。有任何想法吗？干杯

Answer 1

尝试添加 [(ngModel)] 应该可以解决您的问题。

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
public sliderVal = 1;
  constructor() {
   }

  onPriceSliderChange(val) {
    this.sliderVal = val;
  }

}

模板

<span style="font-size: 130px;">{{sliderVal}}</span>

<input type="range" #slider min="1" max="10" value="1" [(ngModel)] ="sliderVal" class="slider" (change)="onPriceSliderChange(slider.value)">

在这里查看它的实际效果。不过，您可能需要对闪烁采取一些措施。