设置Angular Material Slider的样式，使其更厚/更高

Question

我在这里找不到魔术酱时遇到了问题。API似乎不支持它，所以我想我正在寻找一些CSS使滑块变大。

我在左边得到一个，但我想像右边那样来设置样式吗？任何CSS技巧或任何人以前都做过。

特别是“酒吧”的高度。有一百万个东西设置为高度：2px。我尝试了所有这些，但没有任何改变。.我想也许是边界或其他东西？

提前致谢！

StackBlitz：https ://stackblitz.com/angular/kkmmddyaegp ? file = app%2Fslider-overview-example.css（感谢@Andriy）

Answer 1

最直接的解决方案可能是使用transform. 就像是：

my-slider {
    transform: scale(2);
}

有关更多详细信息，请参阅 MDN：https : //developer.mozilla.org/en-US/docs/Web/CSS/transform

Answer 2

您可以尝试将此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;
}

叠砖