将Angular 2 ng prime滑块与范围值绑定到输入字段

Question

我正在使用ng prime滑块。我给滑块赋予范围值并且工作完美。根据我的要求，我需要2个输入字段，您可以输入范围并相应地移动滑块。没有＆＃34;范围＆＃34;我能够实现这一目标。选项。但是我需要将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（）

的操作

from django.db import models
from django.core.urlresolvers import reverse

# Create your models here.
class Servicios(models.Model):
    servicio = models.CharField(max_length=250)
    precio = models.FloatField()


class Doctor(models.Model):
    nombre = models.CharField(max_length=250)
    porcentaje = models.FloatField()

class Ticket(models.Model):
    fecha = models.DateTimeField(auto_now_add=True)
    servicio = models.ForeignKey(Servicios)
    doctor = models.ForeignKey(Doctor)
    cantidad = models.IntegerField()
    p_unitario = models.FloatField()
    total = models.FloatField()


    def get_absolute_url(self):
        return reverse('Main:get-list')

Answer 2

对于范围，在属性绑定中将range指定为true。同时将rangeValues数组保留在ngModel内，而不是在ngModel中使用单独的数组元素。

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

Working Example