如何在angularjs材料silder中显示文本代替数字

Question

单击滑块时我想要的是什么,然后在工具提示上显示文本代替数字.

Answer 1

最后，将 angular.js 更新为 Angular 后，Angular Material为 Angular 滑块提供了自定义拇指标签格式的选项。

import {Component} from '@angular/core';

/**
 * @title Slider with custom thumb label formatting.
 */
@Component({
  selector: 'slider-formatting-example',
  templateUrl: 'slider-formatting-example.html',
  styleUrls: ['slider-formatting-example.css'],
})
export class SliderFormattingExample {
  formatLabel(value: number | null) {
    if (!value) {
      return 0;
    }

    if(value < 250)
    {
        return 'Low';
    }
    else if(value > 250 && value < 750)
    {
       return 'Medium';
    }
    else
    {
        return 'High';
    }

    return value;
  }
}

网页代码：

<mat-slider
  thumbLabel
  [displayWith]="formatLabel"
  tickInterval="1000"
  min="1"
  max="100000"></mat-slider>

注意：我将我的应用程序从 angular.js 更新到 Angular 最新版本。