Динамически обновлять значение переменной при перемещении ползунка HTML в Angular2

Question

Я использую html round slider в моем приложении angular6: 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)">

Смотрите его в действии Здесь .Возможно, вам придется что-то делать с мерцанием.