Customize mat-slider in Angular 15 thumb

Question

in Angular 14 I customized the slider as image below:

And my CSS code:

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

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

  .mat-accent .mat-slider-track-fill {
    background-color: mat.get-color-from-palette($accent, 300) !important;
  }

  .mat-slider-thumb-label {
    background-color: mat.get-color-from-palette($accent, 300) !important;
    height: 30px;
    width: 30px;
    right: -13px !important;
    top: -40px !important;
    display: flex !important;
  }

  .mat-slider-wrapper {
    top: 14px !important;
  }
  .mat-slider-track-wrapper {
    height: 12px !important;
    border-radius: 7px !important;
  }
  .mat-slider-track-background,
  .mat-slider-track-fill {
    height: 12px !important;
    height: 100% !important;
  }

  .mat-slider-track-fill,
  .mat-slider-thumb,
  .mat-slider-thumb-label {
    background-color: mat.get-color-from-palette($accent, 300) !important;
    height: 30px;
    display: flex !important;
  }

  .mat-slider-thumb-label-text {
    opacity: 1 !important;
    font-size: 9px;
  }

  .mat-accent .mat-slider-thumb {
    height: 15px !important;
    width: 15px !important;
    background-color: white !important;
    border: solid 1px mat.get-color-from-palette($accent, 100) !important;
    bottom: -10px !important;
    right: -4px !important;
  }
}

My problem is that in Angular 15 I'm not able to replicate the same thumb with the number inside and the teardrop shape. Can anyone tell me how to port it so it looks the same on Angular 15 as well? thanks

Answer 1

Inspect your html code from browser and find the class for slider. Material 15 use names like '.mdc-slider' or similar and not '.mat-slider' anymore.