如何在Angular 2中移动HTML滑块时动态更新变量值?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (102)

我在angular 6应用程序中使用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;
  }

}

滑块值只有在滑块被移动并且我取消按鼠标左键时才会改变.我想要动态更新滑块的值,每次我移动滑块时,而不仅仅是当我按下鼠标按钮的时候。我知道如何使用jQuery实现这一点,但我不想将jQuery解决方案与Ranges混为一谈。有什么想法吗?

提问于
用户回答回答于

试着添加(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)">

扫码关注云+社区

领取腾讯云代金券