设置 Angular 材质滑块的样式，使其更厚/更高

Question

我在这里找到魔法酱时遇到问题。它看起来 API 不支持它，所以我想我正在寻找一些 CSS 来使滑块更大。

我得到了左边那个，但我想把它设计成右边那个？任何 CSS 技巧或以前有人这样做过。

特别是“栏”的高度。有一百万个东西设置为高度：2px。我尝试增加所有这些但没有任何改变..我想可能是边界或其他什么？

提前致谢！

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

原文由 JBoothUA 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以尝试将此 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 文件中包含这些样式，只需在每个 CSS 规则之前添加 ::ng-deep （但要注意它的长期 弃用，因此请检查每个新版本的 Angular）：

 ::ng-deep .mat-slider.mat-slider-horizontal .mat-slider-wrapper {
  top: 18px;
}
::ng-deep .mat-slider.mat-slider-horizontal .mat-slider-track-wrapper {
  height: 12px;
  border-radius: 10px
}
...

如果使用 SASS，只需使用 :: ng-deep 包装您的代码

::ng-deep {
  .mat-slider.mat-slider-horizontal .mat-slider-wrapper {
    top: 18px;
  }
  .mat-slider.mat-slider-horizontal .mat-slider-track-wrapper {
    height: 12px;
    border-radius: 10px
  }
  ...
}

请注意，这样您的 CSS 将影响全局 CSS 范围。

原文由 Andriy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这对我有用

.mat-slider-thumb {
  background-color: #3f51b5 !important;
  border: none !important;
  box-shadow: 0px 0px 15px #000;
  outline: 5px solid #fff;
}

.mat-slider-track-fill {
  background-color: #3f51b5 !important;
}

.mat-slider-track-fill,
.mat-slider-wrapper,
.mat-slider-track-wrapper,
.mat-slider-track-background {
  height: 10px !important;
  border-radius: 10px;
}

演示： 堆栈闪电战

原文由 HamzaFarooq 发布，翻译遵循 CC BY-SA 4.0 许可协议