Angular 15中自定义mat-slider滑块拇指样式求助

Angular Material 15基于MDC（Material Design Components）重构了滑块组件，原有的.mat-slider-*类名大多被替换，导致旧样式失效。以下是适配后的SCSS代码，可还原你需要的泪滴形带数字拇指效果：

.customSlider {
  // 调整滑块整体位置，适配标签偏移
  .mdc-slider {
    margin-top: 24px;
  }

  // 泪滴形拇指标签样式
  .mdc-slider__thumb-label {
    transform: rotate(45deg) !important;
    border-radius: 50% 50% 0 !important;
    background-color: mat.get-color-from-palette($accent, 300) !important;
    height: 30px;
    width: 30px;
    right: -13px !important;
    top: -40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  // 隐藏默认圆形拇指，只保留自定义泪滴标签
  .mdc-slider__thumb {
    transform: scale(0) !important;
  }

  // 轨道填充颜色
  .mdc-slider__track-fill {
    background-color: mat.get-color-from-palette($accent, 300) !important;
  }

  // 轨道容器样式
  .mdc-slider__track {
    height: 12px !important;
    border-radius: 7px !important;
  }

  // 统一轨道背景和填充的高度
  .mdc-slider__track-background,
  .mdc-slider__track-fill {
    height: 100% !important;
  }

  // 显示标签内的数字并调整样式
  .mdc-slider__thumb-label-text {
    opacity: 1 !important;
    font-size: 9px;
    transform: rotate(-45deg); // 抵消标签的旋转，让数字正显示
    color: white; // 确保数字在深色背景上清晰可见
  }
}

关键调整点说明： #

• 替换所有旧的.mat-slider-*类为MDC对应的.mdc-slider__*类，比如.mat-slider-thumb-label改为.mdc-slider__thumb-label
• 新增滑块整体margin-top，适配MDC布局下标签的偏移位置
• 给拇指标签添加居中对齐属性，确保数字在泪滴内居中
• 给数字文本添加反向旋转，抵消标签的45度旋转，保证数字正常显示
• 精简了旧代码中重复定义的样式规则

使用时保持滑块组件的customSlider类不变即可：

<mat-slider class="customSlider" min="0" max="100" value="50"></mat-slider>

内容的提问来源于stack exchange，提问作者scorona85