如何在primeng p-slider中使用负值？

Question

我使用 primeng 的 p-slider 组件（版本 ^4.1.3 ）。

我希望 p-slider 的范围是 [-100,100]。

我的 html 代码如下：

<div class="col-md-6">
  <label class="my form-inline">
   <input type="number" 
          class="form-control input-sm"
          min="-100" 
          max="100"
          [(ngModel)]="filter.priceEditingPercent[0]" 
          name="filter.priceEditingPercent[0]" />
   -
   <input type="number" 
          class="form-control input-sm"
          min="-100"
          max="100"
          [(ngModel)]="filter.priceEditingPercent[1]"
          name="filter.priceEditingPercent[1]" />

   &nbsp;{{l('PriceChangePercent')}}
  </label>

   <p-slider [(ngModel)]="filter.priceEditingPercent"
             name="filter.priceEditingPercent"
             [range]="true">
   </p-slider>
</div>

我的 typeScript 代码如下：

export class ItemPriceEditingComponent extends AppComponentBase implements OnInit {

    filter = {
        priceEditingPercent: [-100, 100]
    }

    constructor(injector: Injector) {
        super(injector);
    }

    ngOnInit() {
    }

}

我用 [-100,100] 初始化 filter.priceEditingPercent，但 p-slider 无法正确呈现。未显示负值。

Answer 1

我使用 p-slider 组件的 [max] 和 [min] 输入解决了这个问题。我在 HTML.

中将 -100 设置为 [min] 的值并将 100 设置为 [max] 的值

我的正确 html 代码如下：

<div class="col-md-6">
  <label class="my form-inline">
   <input type="number" 
          class="form-control input-sm"
          min="-100" 
          max="100"
          [(ngModel)]="filter.priceEditingPercent[0]" 
          name="filter.priceEditingPercent[0]" />
   -
   <input type="number" 
          class="form-control input-sm"
          min="-100"
          max="100"
          [(ngModel)]="filter.priceEditingPercent[1]"
          name="filter.priceEditingPercent[1]" />

   &nbsp;{{l('PriceChangePercent')}}
  </label>

   <p-slider [(ngModel)]="filter.priceEditingPercent"
             name="filter.priceEditingPercent"
             [range]="true"
             [min]="-100"
             [max]="100">
   </p-slider>
</div>

如何在primeng p-slider中使用负值？

How to use negative value in primeng p-slider?

primeng

angular