How to set different labels for start and end values in Angular Material mat-slider range? - Stack Overflow

admin管理员组

文章数量:1313072

I am using an Angular Material mat-slider with a range selection (start and end thumbs). I want to format the labels so that:

The start thumb displays: "Min: (value)"
The end thumb displays: "Max: (value)"

However, the displayWith function (formatSlideRangeLabel) only receives a single value, so I cannot differentiate between the start and end thumbs. My Code:

  <mat-slider class="ai-basic-slider"
              id="inserted-media-range"
              min="0" max="51" step="1"
              discrete showTickMarks
              [displayWith]="formatSlideRangeLabel">
    <input matSliderStartThumb>
    <input matSliderEndThumb>
  </mat-slider>

  public formatSlideRangeLabel(value: number): string {
    if (value == 51) {
      return 'Max: ∞';
    } else {
      return 'Max: ' + value;
    }

    return `${value}`;
  }

I am using an Angular Material mat-slider with a range selection (start and end thumbs). I want to format the labels so that:

The start thumb displays: "Min: (value)"
The end thumb displays: "Max: (value)"

However, the displayWith function (formatSlideRangeLabel) only receives a single value, so I cannot differentiate between the start and end thumbs. My Code:

  <mat-slider class="ai-basic-slider"
              id="inserted-media-range"
              min="0" max="51" step="1"
              discrete showTickMarks
              [displayWith]="formatSlideRangeLabel">
    <input matSliderStartThumb>
    <input matSliderEndThumb>
  </mat-slider>

  public formatSlideRangeLabel(value: number): string {
    if (value == 51) {
      return 'Max: ∞';
    } else {
      return 'Max: ' + value;
    }

    return `${value}`;
  }

• angular-material
• angular-material2
• angular19
• mat-slider

Share Improve this question Follow edited Jan 31 at 15:50 Steve G 13.5k77 gold badges4444 silver badges5959 bronze badges asked Jan 31 at 15:00 rami-sframi-sf 40144 silver badges1515 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

First bind the min and max values to local properties.

<input matSliderStartThumb [(ngModel)]="min" />
<input matSliderEndThumb [(ngModel)]="max" />

Then all you need to do is check if the value from the displayWith is equal to min value that is binded using ngModel, if the values are equal then it's the min value you are dealing with.

public formatSlideRangeLabel(value: number): string {
  if (value === this.min()) {
    // then it is max
    return 'Min: ' + value;
  } else {
    if (value == 51) {
      return 'Max: ∞';
    } else {
      return 'Max: ' + value;
    }
  }
}

To access this.min(), you have to make sure that function is executed in the component context, to achieve this, we use .bind(this).

HTML:

<mat-slider
  class="ai-basic-slider"
  id="inserted-media-range"
  min="0"
  max="51"
  step="1"
  discrete
  showTickMarks
  [displayWith]="formatSlideRangeLabel.bind(this)"
>
  <input matSliderStartThumb [(ngModel)]="min" />
  <input matSliderEndThumb [(ngModel)]="max" />
</mat-slider>

TS:

import { Component, model } from '@angular/core';
import { MatSliderModule } from '@angular/material/slider';
import { FormsModule } from '@angular/forms';

/**
 * @title Range slider
 */
@Component({
  selector: 'slider-range-example',
  templateUrl: 'slider-range-example.html',
  styleUrl: 'slider-range-example.css',
  imports: [MatSliderModule, FormsModule],
})
export class SliderRangeExample {
  min = model(0);
  max = model(0);
  public formatSlideRangeLabel(value: number): string {
    if (value === this.min()) {
      // then it is max
      return 'Min: ' + value;
    } else {
      if (value == 51) {
        return 'Max: ∞';
      } else {
        return 'Max: ' + value;
      }
    }
  }
}

Stackblitz Demo

本文标签： How to set different labels for start and end values in Angular Material matslider rangeStack Overflow