在 Angular 的反应形式中输入类型 =“范围”

Question

我在 Angular 中以反应形式设置滑块/范围的背景时遇到问题。输入值正在改变但问题是当我在输入上键入时，范围正在改变但颜色（绿色）没有改变。这就是问题所在，请参阅下面的这张图片并在此处查看此 stackblitz 链接：如果不必要，请修改我的代码。

CLICK HERE

Answer 1

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