Angular Material自定义滑块：如何修改默认尺寸与颜色？

没问题！我来帮你解决这个自定义滑块的问题，Angular Material的滑块样式调整其实有两种常用方式，一种是贴合Material设计系统的主题定制，另一种是快速直接的CSS覆盖，下面给你详细说明：

一、自定义滑块颜色 #

方式1：用Material主题统一定制（推荐） #

如果你的项目本来就用了Angular Material的主题系统，直接在全局样式文件（比如styles.scss）里扩展主题就行，这样能保证滑块颜色和其他组件风格统一：

@import '~@angular/material/theming';

// 先定义你想要的调色板，这里用蓝、粉做示例，可替换成自己的颜色
$custom-slider-primary: mat-palette($mat-blue);
$custom-slider-accent: mat-palette($mat-pink);

// 生成自定义主题
$custom-slider-theme: mat-light-theme($custom-slider-primary, $custom-slider-accent);

// 将主题应用到滑块组件
@include mat-slider-theme($custom-slider-theme);

方式2：直接用CSS覆盖（快速调整） #

如果只是想单独改这一个滑块的颜色，不想动全局主题，就用CSS穿透视图封装来修改组件内样式：

:host ::ng-deep {
  /* 滑块未填充部分的轨道颜色 */
  .mat-slider-track-background {
    background-color: #e0e0e0;
  }

  /* 滑块已填充部分的轨道颜色 */
  .mat-slider-track-fill {
    background-color: #2196f3;
  }

  /* 滑块拇指的颜色 */
  .mat-slider-thumb {
    background-color: #ff4081;
  }

  /* 带thumbLabel时，标签的背景色 */
  .mat-slider-thumb-label {
    background-color: #ff4081;
  }
}

二、调整滑块尺寸 #

同样用CSS修改轨道高度、拇指大小、标签尺寸，直接加到组件的CSS文件里即可：

:host ::ng-deep {
  /* 调整轨道高度 */
  .mat-slider-track {
    height: 8px;
  }

  /* 调整滑块拇指的大小 */
  .mat-slider-thumb {
    width: 24px;
    height: 24px;
  }

  /* 调整thumbLabel的大小和字体 */
  .mat-slider-thumb-label {
    width: 48px;
    height: 48px;
    font-size: 16px;
    line-height: 48px;
  }
}

完整示例 #

把上面的样式整合到你的组件中，配合你现有的HTML代码：

<mat-slider thumbLabel max="30" value="10"></mat-slider>

:host ::ng-deep {
  /* 颜色设置 */
  .mat-slider-track-fill {
    background-color: #4caf50;
  }
  .mat-slider-thumb, .mat-slider-thumb-label {
    background-color: #f44336;
  }

  /* 尺寸设置 */
  .mat-slider-track {
    height: 10px;
  }
  .mat-slider-thumb {
    width: 28px;
    height: 28px;
  }
  .mat-slider-thumb-label {
    width: 52px;
    height: 52px;
    font-size: 18px;
  }
}

⚠️ 注意：如果你的Angular组件开启了默认的视图封装（View Encapsulation），一定要加上:host ::ng-deep，否则样式不会生效；如果已经关闭了视图封装，可以去掉这部分前缀。

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