Angular material 角度材质滑块缩放问题

我有一个材质滑块，我想使其更厚更长，因此我使用以下CSS：

.mat-slider.mat-slider-horizontal .mat-slider-wrapper {
  top: 18px;
}
.mat-slider.mat-slider-horizontal .mat-slider-track-wrapper {
  height: 12px;
  border-radius: 10px;
  width:400px;
}
.mat-slider.mat-slider-horizontal .mat-slider-track-background,
.mat-slider.mat-slider-horizontal .mat-slider-track-fill {
  height: 100%;
}
.mat-slider.mat-slider-horizontal .mat-slider-track-fill {
  background-color: blue;
}
.mat-accent .mat-slider-thumb {
  height: 30px;
  width: 30px;
  background-color: white;
  border: solid 2px gray;
  bottom: -20px;
  right: -20px;
}
.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
  background-color: white;
}

这确实有效并增加了滑块的宽度和长度，但当您开始滑动滑块时，大约一半的时候，高亮显示的条开始通过您实际所在的位置。我不确定这是否是一个带有材料的bug，或者是我必须在CSS中添加的东西。

不，这不是bug

您可以尝试将此CSS添加到全局样式：

.mat-slider.mat-slider-horizontal .mat-slider-wrapper {
  top: 18px;
}
.mat-slider.mat-slider-horizontal .mat-slider-track-wrapper {
  height: 12px;
  border-radius: 10px
}
.mat-slider.mat-slider-horizontal .mat-slider-track-background,
.mat-slider.mat-slider-horizontal .mat-slider-track-fill {
  height: 100%;
}
.mat-slider.mat-slider-horizontal .mat-slider-track-fill {
  background-color: blue;
}
.mat-accent .mat-slider-thumb {
  height: 30px;
  width: 30px;
  background-color: white;
  border: solid 2px gray;
  bottom: -20px;
  right: -20px;
}
.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
  background-color: white;
}

---

你可以在这里预览代码

你改变了什么？没有把类放在你的css

中。mat slider wrapper

和

top:18px

对不起，我的css中有那一行…忘了把它添加到问题中。我仍然有同样的问题。分享你的stackblitz代码，如果没有，那么做一个stackblitz你拿走了我的宽度：400px。如果你将这一行添加回stackblitz，你会看到滑块的问题。如果你对这个答案感到满意，那么就比voteup更容易找到更好的解决方案