Как можно постоянно отображать метку большого пальца для слайдера материала?

Question

Я хочу, чтобы метка большого пальца отображалась постоянно, вне зависимости от того, фокусируется она или нет.Когда я нажимаю на ползунок, на нем появляется метка, подобная этой.

Но как только она не сфокусирована, метка исчезает.

Как я могу получить ярлык остаться?

Answer 1

Angular Material не предоставляет эту функциональность по умолчанию, но вы можете справиться с этим, добавив следующие 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