Dynamically update the value of variable when moving HTML slider in Angular2

Question

Im using html round slider in my angular6 app: https://www.w3schools.com/howto/howto_js_rangeslider.asp

The implementation in .html file looks like this:

<span style="font-size: 130px;">{{sliderVal}}</span>

<input type="range" #slider min="1" max="10" value="1" class="slider" (change)="onPriceSliderChange(slider.value)">

The implementation of the .ts file:

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;
  }

}

The sliderVal value changes only when the slider is moved and I un-press the mouse left button. I want to update the value of the sliderVal dynamically, every time I move the slider and not only when I un-press the mouse button. I know how to achieve this using jQuery but I don’t want to mix jQuery solution with Angular. Any ideas? Cheers

Answer 1

Try adding [(ngModel)] should solve your issue.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
public sliderVal = 1;
  constructor() {
   }

  onPriceSliderChange(val) {
    this.sliderVal = val;
  }

}

Template

<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)">

See it in action Here. You might have to do something about the flickering though.