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

angular

417 观看

1回复

6 作者的声誉

我有滑块滚动。我不知道该怎么问。意义。将会显示在图表上,但不会处于活动状态。该文档是错误的。存在min max的属性,但是min-start或min-limit的相似性没有任何关系... 在此处输入图像描述

在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

作者: Sergey Derkach 的来源 发布者: 2017 年 9 月 15 日

回应 1


0

774 作者的声誉

检查此工作代码。

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(',', '-');
  }
作者: Developer 发布者: 2018 年 7 月 20 日
32x32