Angular Material Slider-如何始终显示带有值和自定义的刻度间隔？

Question

我正在使用Angular Material Slider，但工作正常，但是找不到任何教程，并且不确定如何对滑块进行一些高级自定义，例如material.io和always show tick interval with values上的滑块。

有没有人举过一个类似的例子？还是为此提供任何官方工具？

Answer 1

感觉有点古怪，但是我使用了这样的东西：

:host ::ng-deep mat-slider.mat-slider.mat-slider-horizontal .mat-slider-ticks {
  // make ticks fill full height
  height: 20px;
  // this will force show the ticks
  opacity: 1;
  background-size: 10.101% 2px !important;
  transform: translateZ(0px) translateX(5.05051%); // I adjusted my slider to be thicker, so the correct values for you here may be different
}

在我组件的SCSS文件中。

或者，您可以删除:host ::ng-deep部分并将样式放入styles.scss（这可能是更好的做法，因为显然已经/不推荐使用此方法：How to style child components from parent component's CSS file?）

这也可能有用： Style the Angular Material Slider so that it is thicker / taller

Answer 2

我注意到，即使将 opacity 设置为 1，如上一个答案中一样，只有将光标悬停在滑块上后才会显示刻度。

我的解决方案是使用 ViewChild 引用滑块，然后在 this.slider.focus() 生命周期挂钩中调用 ngAfterViewInit，如下所示：

export class MyComponent implements OnInit, AfterViewInit {
    @ViewChild('slider') public slider: MatSlider;

    constructor() {}

    ngAfterViewInit(): void {
        if (this.slider) {
            this.slider.focus();
        }
    }
}

Answer 3

在this page上有一个看起来像< >的图标，悬停时显示View source

在您的评论中，您说您不确定如何显示该值。在此示例中，它为您提供HTML，TS和CSS以实现其功能。您可以尝试对其进行编辑以适合您的需求。如果您选中显示Show thumb label的按钮，则会显示数字的增加。

还要确保还要查看页面的the API section。

您可能还想专门查看here，以获取有关如何检查滑块值何时更改的一些文档。