angular - 将 Angular 2 ng prime slider 与范围值绑定(bind)到输入字段

Question

我正在使用 ng prime slider 。我为 slider 提供了范围值并且工作完美。根据我的要求，我需要 2 个输入字段，您可以在其中输入范围， slider 也会相应移动。我可以在没有“范围”选项的情况下实现这一目标。但我需要绑定(bind)到 slider 的 2 个输入字段，以便 slider 在最小值和最大值的文本字段上输入时更改其值。

无范围代码 - 这很好用..

<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 文件中，在此处输入代码 - 范围值 范围值:数字[] = [1, 180];

清晰暗示我所说内容的图像

你能帮忙吗？

Answer 1

在输入更改时执行类似 onInputChange() 的操作

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

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