如何始终显示材质滑块的拇指标签？

Question

无论是否聚焦，我都想让拇指标签一直显示。当我点击滑块时，它会显示这样的标签。

但是一旦它不集中，标签就消失了。

我怎样才能得到标签？

Answer 1

Material默认情况下，Angular不提供此功能，但您可以通过在全局 css 文件中添加以下 css 来处理此问题：

.mat-slider-thumb-label {
    transform: rotate(45deg) !important;
    border-radius: 50% 50% 0 !important;
  }

.mat-slider-thumb {
    transform: scale(0) !important;
}

.mat-slider-thumb-label-text {
    opacity: 1 !important;
}

stackblitz 上的工作演示

Answer 2

接受的答案对我来说并不一致，直到我将其包装在 ng-deep 中

::ng-deep {
  .mat-slider-thumb-label {
    transform: rotate(45deg) !important;
    border-radius: 50% 50% 0 !important;
  }  
  .mat-slider-thumb {
    transform: scale(0) !important;
  }  
  .mat-slider-thumb-label-text {
    opacity: 1 !important;
  }
}

该解决方案来自willshowell这里： https ://github.com/angular/components/issues/4803

Answer 3

Angular Material V15 中基于 mdc 的滑块

::ng-deep .mdc-slider .mdc-slider__value-indicator {
  transform: none !important;
}