將角2 ng素數滑塊與範圍值綁定到輸入字段

Question

我正在使用ng素數滑塊。我給範圍值滑塊和完美的作品。對於我的要求，我需要2個輸入字段，您可以輸入範圍，並且滑塊相應地移動。我可以在沒有「範圍」選項的情況下達到此目的。但是我需要綁定到滑塊的2個輸入字段，以便滑塊在min和max上的文本字段上輸入時更改其值。

代碼沒有範圍 - 這工作得很好..

<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：數[] = [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> 

Working Example