How can I display thumb label all the time for material slider?

Question

I want to let thumb label to display all the time no matter it is focused or not. When I click on the slider it shows label like this.

But as soon as it is unfocused, the label is gone.

How can I get the label stay ?

Answer 1

Angular Material doesn't provide this functionality by default, but you can handle this by adding following css in your global css file:

.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;
}

Working demo on stackblitz