如何在Angular Material中的md-slider中给出多个步骤

时间:2019-07-11 11:08:44

标签: angular-material

我需要在滑块中显示200000到2500000的值,其中值从200000步进到1000000是50000,而从1000000到2500000值步进500000。

但是我设置step = 50000,但是当用户尝试将1000000滑到2500000时如何将其更改为500000?

HTML:

<div class="col-6">
      <label>Sum Insured</label>
      <span class="slider-title">&#8377; {{ sliderValue }}</span>
      <mat-slider
        class="example-margin"
        [max]="max"
        [min]="min"
        [step]="step"
        [thumbLabel]="thumbLabel"
        [tickInterval]="tickInterval"
        [(ngModel)]="sliderValue"
      >
      </mat-slider>
    </div>

JS:

autoTicks = false;
  max = 50000;
  min = 0;
  showTicks = true;
  step = 1;
  thumbLabel = true;
  value = 0;
  vertical = false;

更新:

this.min = parseInt(this.packages[0].coverageResponse.personCoverageList[0].sumInsuredAmount.split(' ')[1]);
    this.max = this.packages[0].coverageResponse.personCoverageList[0].maxInsuredAmount;
    this.sliderValue = parseInt(this.packages[0].coverageResponse.personCoverageList[0].sumInsuredAmount.split(' ')[1]);
    this.step = 50000;

0 个答案:

没有答案