代码之家 › 专栏 › 技术社区 › GoldenAge

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

angular6 ecmascript-6 angular

GoldenAge · 技术社区 · 6 年前

我在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 回复 | 直到 6 年前

Vikhyath Maiya 6 年前

@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

推荐文章

Udders · 使用另一个数组中的值按索引从数组中删除

2 年前

Matt · 获取数组长度并推入每个对象

2 年前

Rahmouni Rabii · 尝试访问数组中的对象时未定义

3 年前

Brian Patterson · Javascript自定义数组。原型方法日志“未定义”

3 年前

dapidmini · 未捕获的承诺嵌套异步函数承诺错误处理

3 年前

Arka Bhattacharjee · 如何在JavaScript中反转大写的字符串?[重复]

3 年前

Zeeps Wear · 如何按键对对象进行分组?

3 年前

Kevin Giraldo · 如何更改字符串或数字在JavaScript中转换类的方式?

3 年前

Rachel · 如何按ID从JSON对象数组中删除数组元素

3 年前

minsu123 · 如何解析react中的单个引用?

3 年前