Установите начальные значения для диапазона ввода в Angular

Question

Для одного из моих проектов я внедрил ползунок диапазона ввода с пользовательским стилем. когда компонент инициализируется, я хочу установить максимальную цену в качестве значения по умолчанию в ползунке. Я попробовал несколько способов, но я не смог найти решение для этого. Может кто-то скажет, что я делаю неправильно. Это демонстрация стекаблита моей реализации

Answer 1

вам нужно создать свойство ввода для значения и установить форму управления и привязать его к элементу ввода вот так компонент

  @Input() value:number; // default value

  constructor(){
    this.inputForm = new FormGroup({priceRangeSlider : new FormControl(null)});
  }

  ngOnInit() {
    this.slider.valueChanges.subscribe(values =>{
      this.priceForDisplay = values;
    })

    this.inputForm.get('priceRangeSlider').setValue(this.value); // init value set 
  }

шаблон

    <div class="slider-container">
      <input
        class="slider"
        type="range"
        formControlName="priceRangeSlider"
        [min]="minPrice"
        [max]="maxPrice"
        step="100"
        [value]="value"
      />
    </div>

шаблон приложения

<app-user [minPrice]="1000" [maxPrice]="10000"  [value]="4000"><app-user>

демо ?

Answer 2

Я отредактировал ваш пример кода: https://stackblitz.com/edit/create-a-basic-angular-component-amnhih

Я привязал FormControl к элементу слайдера и переместил исходный вызов setValue ниже уровня подписки.