Angular Material 滑块 - 显示最小和最大标签

【问题标题】：Angular Material slider - show min and max labelsAngular Material 滑块 - 显示最小和最大标签
【发布时间】：2017-09-21 12:09:36
【问题描述】：

我正在使用 Angular Material 滑块，我想在滑块的两端显示代表为滑块设置的最小值和最大值的标签。可选地，我想显示一个带有点和相对标签的比例，显示哪个值与哪个点相关。这是 javascript 库提供的其他滑块中存在的功能，但我在 Angular Material 滑块 API 中找不到类似的功能。我想知道是否也可以使用 Angular Material 提供的滑块获得类似的行为。

【问题讨论】：

请包含您当前的代码。
我没有写具体的代码。我只是使用角材料滑块提供的标准 API

标签： angular angular-material2

【解决方案1】：

documentation page for Angular Material's slider component上明确给出了答案。

<md-slider
    min="1" max="5" // min & max values
    step="0.5" // step at which the slider control moves, if not given it will move smoothly
    tickInterval="1" // interval at which a tick is shown on the slider, if not given there will be none
    thumbLabel // show the selected value when the user moves the slider
    value="1" // initial value
></md-slider>

您不能使用组件的控件显示最小值和最大值，因为 Material Design 指南不允许这样做。但只需将它们自己添加到模板中就很容易了。例如，类似：

<span class="text-small">1</span><md-slider></md-slider><span class="text-small">5</span>

【讨论】：