将具有范围值的 Angular 2 ng 素数滑块绑定到输入字段答案

【问题标题】：Binding Angular 2 ng prime slider with range values to input fields将具有范围值的 Angular 2 ng 素数滑块绑定到输入字段
【发布时间】：2018-03-16 14:47:52
【问题描述】：

我正在使用 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];

一张清楚地暗示我在说什么的图片

你能帮忙吗？

【问题讨论】：

您解决了这个问题吗？我正在使用反应形式，但看起来问题是一样的：假设我将初始最大值设置为 50；然后我将它设置为 40 - 一切都很好；然后我再次将它设置为 50，然后右标签飙升到月球 :)

标签： angular

【解决方案1】：

对于范围，在属性绑定中将range 指定为true。还要将rangeValues 数组保留在ngModel 中，而不是让它们在ngModel 中分开数组元素。

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

Working Example

【讨论】：

范围工作正常。我一直在寻找的是将输入字段绑定到滑块，以便当我们通过输入字段提供值时，滑块会相应地移动。这发生在非范围滑块上。但是在指定的范围内，它不会发生。

【解决方案2】：

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

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

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

【讨论】：