如何修改md-slider刻度高度？设置tick-interval后仅末刻度生效问题

这问题我之前在项目里也碰到过！核心原因是你选的CSS目标不对，还有样式优先级没跟上Angular Material的默认样式。你之前用的.mat-slider-ticks其实是所有刻度的容器，不是单个刻度元素，所以改它的height自然没法影响每个刻度；至于只有最后一个刻度生效，大概率是Material的默认样式里给最后一个刻度加了更高权重的规则，刚好你的容器样式意外影响到了它。

解决方案 #

试试用更精准的选择器定位到每个单独的刻度，再结合:host和::ng-deep保证样式只作用在当前组件内，同时覆盖默认样式：

:host ::ng-deep .mat-slider-horizontal .mat-slider-ticks .mat-slider-tick {
  height: 5px;
  width: 2px; /* 可选，让刻度更粗一点，视觉更明显 */
  margin-top: -2px; /* 可选，调整刻度垂直位置，避免和轨道重叠 */
}

如果这个选择器在你的Material版本里不生效（不同版本的类名可能有小变化），可以试试另一种情况——有些版本里刻度是用背景渐变实现的，这时候要修改轨道容器的伪元素：

:host ::ng-deep .mat-slider-horizontal .mat-slider-track-wrapper::after {
  height: 5px;
  /* 渐变步长要匹配你的刻度间隔，比如min=0、max=10、tick-interval=1的话，总共有11个刻度，步长就是100%/10 */
  background-image: repeating-linear-gradient(to right, #ccc, #ccc 2px, transparent 2px, transparent calc(100% / 10));
}

小提示 #

• 尽量少用!important，上面的代码用:host已经能提升样式优先级，大部分情况下不需要加就能生效；
• 确认你的tick-interval设置和滑块的min/max匹配，确保所有刻度都正常渲染出来了。

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