Question

我正在使用ng2-nouislider进行角度2 proyect，到目前为止我无法指定自定义步骤。目前我的模板文件中有：

<nouislider [tooltips]="true" [min]="mensualidadesMin" [max]="mensualidadesMax" [step]="mensualidadesStep" [(ngModel)]="mensualidadesValue" (ngModelChange)="mensualidadesOnChange($event)" [ngModelOptions]="{standalone: true}"></nouislider>

在我的打字稿文件中，我有：

this.mensualidadesMin = 1;
    this.mensualidadesMax = 30;
    this.mensualidadesStep = 1;

我想要自定义步骤。如：1,3,6,12,18等。

每当我尝试将步变量更改为数字[]时，它也不起作用。当我尝试使用范围或管道时，它也不起作用。

我已阅读并发现了很多uisliders，有些不适用于angular2，并试图将它们作为外部导入包含但不起作用。

你知道在角度2中使用什么uislider可以让我设置自定义步骤，或者我如何用当前步骤实现它。

Answer 1

我查看了nguisldier的src代码，发现config中有一些选项，到目前为止我做到了这一点：

在html模板中我添加了配置：

<div id="plazos_slider">
    <nouislider style="margin-top:45px;" [config]="mensualidadesConfig" [(ngModel)]="mensualidadesValue" (ngModelChange)="mensualidadesOnChange($event)" [ngModelOptions]="{standalone: true}"></nouislider>
</div>

并在我的ts文件中：

mensualidadesConfig: any = {
    snap: true,
    start: [1],
    range: {
      'min': 1,
      '14%': 3,
      '28%': 6,
      '42%': 12,
      '56%': 18,
      '70%': 24,
      'max': 30
    },
    pips: {
      mode: 'values',
      values: [1, 3, 6, 12, 18, 24, 30],
      density: 4,
    }
  }

此外，我设法通过css普通点数隐藏，只留下大点。我包装了所有修改过的css iniside plazos_slider id以避免影响原始css，因为我可以进一步使用nguislider。

Angular 2 ng2-nouislider自定义步骤？

1 个答案: