Angular : changing setinterval timer via range slider

Question

l am using ionic 4 and angular . l want to use ionic range slider . The range slider lets users to change a range of values by moving the slider . l want to change the value of setInterval to reduce refresh or increase speed of refreshing .

My code

  time : 600 ;
  speed = 300;
  private interval;

rangeChanged(){
    this.speed = 300 * this.time;

    console.log(this.time)
  }


  play() {

    this.interval = setInterval(() => {

   // i deleted my code here 

    }, this.time);
  }

The problem is , this.time in rangeChanged function is not getting update . When l changing the range slider the values setInterval are still same ! are not updating , in that case i have to stop setInterval then start again even he get new values . My point is how can make it live updating value for setInterval speed ?

html

<ion-range min="300" max="600" [(ngModel)]="time" color="secondary"
   (ngModelChange)="rangeChanged($event)" step="10" debounce="500">
    <ion-label range-left>3</ion-label>
    <ion-label range-right>10</ion-label>
  </ion-range>

Answer 1

The method setInterval is already invoked when you called method play() with this.time value at that time.

If you want to change any other value inside the callback method ie the first argument of setinterval you can hook it up with some getter methods, But if you want to change the interval you have to clear and call again

rangeChanged(e){
  this.speed = 300 * e;

  console.log(e.target.value)
  play(e)
}

play(time) {
  if(this.interval) {
    clearInterval(this.interval)
  }

  this.interval = setInterval(() => {
    const r = getAnotherValue(); // will work
  }, time);
}