如何为Angular Material 15 Slider设置轨道及滑块样式？

针对Angular 15+版本（DOM结构与CSS类已更新，旧方案失效），以下是直接可用的自定义样式设置方法，需在全局样式文件（如global_styles.css/styles.scss）中编写，避免组件视图封装的隔离影响：

1. 轨道样式设置 #

未选中轨道（背景） #

控制轨道未激活部分的颜色与宽度：

.mdc-slider__track--inactive {
  background-color: #e0e0e0; /* 自定义背景色 */
  height: 8px; /* 自定义轨道宽度（垂直方向高度） */
}

已选中轨道（前景） #

控制轨道已激活填充部分的颜色与宽度：

.mdc-slider__track--active,
.mdc-slider__track--active_fill {
  background-color: #2196f3; /* 自定义前景色 */
  height: 8px; /* 建议与未选中轨道宽度保持一致 */
}

2. 滑块（拇指）样式设置 #

基础状态样式 #

设置滑块的填充色、边框颜色与宽度：

.mdc-slider__thumb-knob {
  background-color: #ffffff; /* 自定义填充色 */
  border: 3px solid #2196f3; /* 自定义边框宽度 + 颜色 */
}

激活/聚焦状态样式（可选） #

调整滑块在拖动、聚焦时的样式：

.mdc-slider--active .mdc-slider__thumb-knob,
.mdc-slider--focused .mdc-slider__thumb-knob {
  border-color: #1976d2; /* 激活时的边框高亮色 */
}

3. 可选：滑块阴影自定义 #

如果需要调整滑块的阴影效果，可添加以下样式：

.mdc-slider__thumb {
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.4); /* 自定义阴影大小与颜色 */
}

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