将角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