在Angular2中移动HTML滑块时动态更新变量的值
在Angular2中移动HTML滑块时动态更新变量的值
提问于 2018-06-10 00:14:08
我在我的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混为一谈。有什么想法吗？干杯
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-10 01:13:32
尝试添加(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中查看它。不过，您可能需要对闪烁做些什么。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50776202
复制相关文章
相似问题