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

Answer 2

The accepted answer didn't work consistently for me until I wrapped it in 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;
  }
}

This solution came from willshowell here: https://github.com/angular/components/issues/4803