在 Angular 中以反应形式输入类型="Range"

Question

我在 Angular 中以反应形式设置 slider/range 的背景样式时遇到问题。输入值正在改变，但问题是当我输入输入时，范围正在改变，但颜色（绿色）没有改变。这就是问题所在，请参阅下图并查看此 stackblitz link 此处：如果不需要，请也修改我的代码。

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

在 Angular 中以反应形式输入类型="Range"

Input Type="Range" in Reactive Forms in Angular

angular

angular-reactive-forms

angular-forms