Question

我有滑块滚动。我不明白怎么问。意义。它将在图表上但不会激活。文档很糟糕。有最大最小值的属性，但是min-start或min-limit的相似性没有任何内容...... enter image description here

在Html中：

 <form [formGroup]="form2">
      <nouislider [config]="someRangeconfig" [connect]="true" [(ngModel)]="someRange"  [formControl]="form2.controls.range"></nouislider>
    </form>

TS：

public someRange:number[] = [300, 3000];
  public form2:FormGroup;
  public someRangeconfig:any = {
    behaviour: 'drag',
    connect: true,
    //start:300,
    //margin: 5,
    step: 1,
    //limit: 1000,
    range: {
      min: 0,
      max: 5000
    }
  };

 public ngOnInit() {
    this.form2 = this.fb.group({'range': [[300, 3000]]});
  }

我使用：https://github.com/tb/ng2-nouislider

Answer 1

检查此工作代码。

HTML '

<nouislider start="startingRange" [connect]="true" [min]="25000" [max]="800000" [step]="77500" tabindex="9" (ngModelChange)="onSliderChange($event)" name="slider"></nouislider>
<div class="top-section">
    <div>
        <span *ngIf="startingRange[0] == 25000">&lt;</span>{{startingRange[0] | currency:'USD':'symbol':'2.0-0'}}</div>
    <div>{{startingRange[1] | currency:'USD':'symbol':'2.0-0'}}
        <span *ngIf="startingRange[1] == 800000">+</span>
    </div>
</div>

JS

startingRange = [25000，800000];

onSliderChange(event: any) {
    this.contactFiltersForm.value.incomeRange = event
    .toString()
    .replace(',', '-');
    this.selectedContactFilters.incomeRange = event
      .toString()
      .replace(',', '-');
  }

如何设置开始/结束位置ng2-nouislider？

1 个答案: