设计 Angular Material 15 滑块的样式？

Question

对于 Angular Material Slider，我们如何设置轨道前景、背景和轨道宽度以及拇指填充颜色和拇指边框颜色和宽度的样式？

这里有一个关于 Angular Material 滑块样式的答案，但是 Angular Material 已更新 DOM 结构和 CSS 类以符合新的 Material Design 规范，因此样式不再适用。

这是 Angular 15 的 Stackblitz，尝试应用 SO 答案中的样式。

Answer 1

对于大多数内容，您只需覆盖 css 变量即可。

将一个类应用到您的滑块：

<mat-slider class="my-slider">
  <input matSliderThumb>
</mat-slider>

并覆盖一些用于样式的变量：

.my-slider {
  --mdc-slider-handle-color: red;
  --mdc-slider-active-track-color: green;
  --mdc-slider-inactive-track-color: orange;

  --mdc-slider-inactive-track-height: 12px;

  --mdc-slider-handle-height: 25px;
  --mdc-slider-handle-width: 40px;

  --mdc-slider-inactive-track-shape: 20px;
}

我确信它们都列在文档中的某个地方，但我没有费心去寻找它们。事实证明，仅使用开发人员工具检查 DOM 就足以进行简单的更改。

关于拇指边框 - 根据材质指南，边框与填充颜色相同，因此您需要做的不仅仅是更改 css 变量。由于拇指是它自己的组件，因此您必须使用样式穿透::ng-deep或将样式放置在全局 styles.scss 文件中。

::ng-deep.my-slider .mdc-slider__thumb .mdc-slider__thumb-knob {
  border: 3px solid purple;   
}

在这里使用 stackblitz 进行一些随机覆盖。