在Angular的反应形式中输入Type =“ Range”

Question

我在用Angular以反应形式设置滑块/范围背景的样式时遇到问题。输入值正在更改，但问题是当我在输入上键入时，范围正在更改，但颜色（绿色）未更改。这是问题所在，请参见下面的图片和此stackblitz链接：请在不必要的情况下修改我的代码。

CLICK HERE

Answer 1

尝试将代码更新为：可工作的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();
    };
  }