我在我的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混为一谈。有什么想法吗?干杯
发布于 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中查看它。不过,您可能需要对闪烁做些什么。
https://stackoverflow.com/questions/50776202
复制相似问题