在 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)">

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

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

Dynamically update the value of variable when moving HTML slider in Angular2

ecmascript-6

angular

angular6

模板