Input Type="Range" in Reactive Forms in Angular

Question

I'm have a problem in styling the background of my slider/range in reactive forms in Angular. The input value is changing BUT the problem is when i type on the input, the range is changing BUT the color (green) is not changing. This is the problem, see this image below and see this stackblitz link HERE: Pls also revise my code if its unecessary.

CLICK HERE

Answer 1

Try updating your code to: working stackblitz
https://stackblitz.com/edit/slider-range-reactive-forms-jmoxcm

 changeInputTip(value: any) {
    console.log(+value);
    this.form.get("tip").setValue(+value);
    // this.slider2.nativeElement = +value;
    this.setValues();
  }

setValues() {
      const slider = this.slider2.nativeElement as HTMLElement;
      const sliderValue = slider as HTMLInputElement;
      slider.style.background =
        "linear-gradient(to right, #f36621 0%, #f36621 " +
        sliderValue.value +
        "%, #eeeeee " +
        sliderValue.value +
        "%, #eeeeee)";
      // console.log(sliderValue.value);

      parseInt(sliderValue.value, 10) >= 20
        ? (this.circle1.nativeElement.style.background = "#f36621")
        : (this.circle1.nativeElement.style.background = "#cbcbcb");

      parseInt(sliderValue.value, 10) >= 40
        ? (this.circle2.nativeElement.style.background = "#f36621")
        : (this.circle2.nativeElement.style.background = "#cbcbcb");

      parseInt(sliderValue.value, 10) >= 60
        ? (this.circle3.nativeElement.style.background = "#f36621")
        : (this.circle3.nativeElement.style.background = "#cbcbcb");

      parseInt(sliderValue.value, 10) >= 80
        ? (this.circle4.nativeElement.style.background = "#f36621")
        : (this.circle4.nativeElement.style.background = "#cbcbcb");

      parseInt(sliderValue.value, 10) >= 100
        ? (this.circle5.nativeElement.style.background = "#f36621")
        : (this.circle5.nativeElement.style.background = "#cbcbcb");
}

  ngAfterViewInit() {
    const slider = this.slider2.nativeElement as HTMLElement;
    console.log(slider);
    slider.oninput = () => {
      this.setValues();
    };
  }