angular - 在 Angular2 中移动 HTML slider 时动态更新变量的值

Question

我在我的 angular6 应用程序中使用 html 圆形 slider : 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;
  }

}

只有当 slider 移动并且我松开鼠标左键时，sliderVal 值才会改变。我想在每次移动 slider 时动态更新 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)">

查看实际效果 Here .不过，您可能需要对闪烁采取一些措施。