Angular Material slider - 显示最小和最大标签

Question

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

Answer 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>