如何为Angular Material mat-slider范围滑块设置首尾不同标签？

要区分范围滑块的起始（Min）和结束（Max）标签，你可以通过绑定滑块的范围值，在displayWith函数中对比当前值与范围值数组的元素来判断所属滑块，具体实现如下：

修改模板代码 #

给滑块添加双向数据绑定，用于同步起始和结束值：

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

组件类实现 #

在组件中定义范围值变量，并修改formatSlideRangeLabel函数：

import { Component, ViewChild } from '@angular/core';
import { MatSlider } from '@angular/material/slider';

@Component({
  selector: 'app-your-component', // 替换为你的组件选择器
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 初始化范围值，与滑块的min、max对应
  rangeValues: [number, number] = [0, 51];

  // 获取滑块实例，确保判断的准确性
  @ViewChild(MatSlider) slider!: MatSlider;

  public formatSlideRangeLabel(value: number): string {
    // 判断当前值属于起始滑块还是结束滑块
    const isMin = value === this.slider.value![0];
    const prefix = isMin ? 'Min' : 'Max';

    // 处理最大值显示∞的逻辑
    if (value === 51) {
      return `${prefix}: ∞`;
    }

    return `${prefix}: ${value}`;
  }
}

替代方案（无需ViewChild） #

如果不想使用ViewChild，可以直接通过rangeValues数组判断：

public formatSlideRangeLabel(value: number): string {
  const isMin = value === this.rangeValues[0];
  const prefix = isMin ? 'Min' : 'Max';

  if (value === 51) {
    return `${prefix}: ∞`;
  }

  return `${prefix}: ${value}`;
}

注意：若你的业务场景允许起始值等于结束值，可根据需求添加额外的判断逻辑，避免标签混淆。

内容的提问来源于stack exchange，提问作者rami-sf