Тип ввода = «Диапазон» в реактивных формах в угловых

Question

У меня проблема с заданием фона моего ползунка / диапазона в реактивных формах в Angular. Значение входа меняется, НО проблема в том, что когда я печатаю на входе, диапазон меняется, НО цвет (зеленый) не меняется. Это проблема, см. Это изображение ниже и эту ссылку на стек. ЗДЕСЬ: Просьба также пересмотреть мой код, если он не нужен.

НАЖМИТЕ ЗДЕСЬ

Answer 1

Попробуйте обновить код до: рабочий стекблиц
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();
    };
  }