將具有范圍值的 Angular 2 ng 主要滑塊綁定到輸入字段

Question

我正在使用 ng prime 滑塊。 我為滑塊提供了范圍值並且效果很好。 根據我的要求，我需要 2 個輸入字段，您可以在其中輸入范圍並相應地移動滑塊。 我可以在沒有“范圍”選項的情況下實現這一點。 但我需要綁定到滑塊的 2 個輸入字段，以便滑塊在最小和最大文本字段上輸入時更改其值。

無范圍的代碼 - 這工作正常..

<input type="text" [(ngModel)]="rangeValues[0]" style="width:190px" />
<p-slider [(ngModel)]="rangeValues[0]" [style]="{'width':'200px'}"></p-slider>

范圍代碼 - 不工作..

<input type="text" pInputText [(ngModel)]="rangeValues[0]" style="width:190px"/>
<input type="text" pInputText [(ngModel)]="rangeValues[1]" style="width:190px"/>                <p-slider [(ngModel)]="rangeValues" [range]="true [max]="180"orientation="vertical" (onSlideEnd)="slideEnd($event)"(onChange)="handleChange($event)"></p-slider>

在 ts 文件中輸入代碼 - 范圍值 rangeValues: number[] = [1, 180];

一張圖片可以清楚地暗示我在說什么

能否請你幫忙？

Answer 1

在您的輸入更改上執行類似 onInputChange() 的操作

onInputChange() {
  this.rangeValues = [this.from, this.to];
}

<p-slider class="p-slider-component" [range]="true" [(ngModel)]="rangeValues"></p-slider>

Answer 2

對於范圍指定range為true的屬性綁定。 還要將rangeValues數組保留在ngModel而不是讓它們在ngModel分開數組元素。

<p-slider [(ngModel)]="rangeValues" 
   [style]="{'width':'200px'}" 
   [range]="true">
</p-slider>

工作示例