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

【问题标题】：Style the Angular Material Slider so that it is thicker / taller设置 Angular 材质滑块的样式，使其更厚/更高
【发布时间】：2019-02-19 17:12:02
【问题描述】：

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

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

特别是“栏”的高度。有一百万个东西设置为高度：2px。我试着把它们都加起来，但没有任何改变..我想可能是边界还是其他什么？

提前致谢！

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

【问题讨论】：

你在纠结哪一点？你能用你尝试过的东西创建一个 Stackblitz 吗？我认为一些 CSS 类应该可以解决问题
这里有一个演示：stackblitz.com/angular/…
有一百万个东西设置为高度：2px。我试着把它们都加起来，但没有任何改变..我想可能是边界或其他什么..
@user184994 特别是栏的高度

标签： css angular angular-material

【解决方案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;
}

STACKBLITZ

如果您需要在具有默认encapsulation 的任何组件的CSS 文件中包含这些样式，只需在每个CSS 规则之前添加::ng-deep（但要注意它的长期使用deprecation，因此请检查每个新版本角）：

::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 in mac safari 浏览器边框半径不起作用，滑块更改时不显示颜色，请提供任何想法
嗨@dhana，我在 MAC Safari 中检查了它，它看起来与 Chrome 或 Firefox 中的完全一样。在加载 stackblitz 应用程序时，我看不到圆形边框，但一旦加载，它看起来正确。我在 macOS Mojave 10.14、Safari 2.0 (14606.1.36.1.9) 上对其进行了测试。如果您仍然有问题，请尝试在纯 HTML（而不是 stackblitz）中对其进行测试，并检查您观察到的 macOS 和 Safari 版本。
如何在组件的css中做到这一点？

【解决方案2】：

最直接的解决方案大概是使用transform。比如：

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

查看 MDN 了解更多详情：https://developer.mozilla.org/en-US/docs/Web/CSS/transform

【讨论】：

【解决方案3】：

用这个覆盖mat css

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

【讨论】：

简单有效

【解决方案4】：

这对我有用

:root {
    --slider-height: 28px;
}
.mdc-slider .mdc-slider__tick-marks {
    height: var(--slider-height);
}

.mdc-slider .mdc-slider__track--inactive,
.mdc-slider .mdc-slider__track {
    height: calc(var(--slider-height) - 2px);
}

.mdc-slider .mdc-slider__track--active {
    height: var(--slider-height);
}

.mdc-slider .mdc-slider__track--active_fill {
    height: var(--slider-height);
    border-top-width: var(--slider-height);
}

.mdc-slider .mdc-slider__thumb-knob {
    height: calc(var(--slider-height) + 9px);
    width: calc(var(--slider-height) + 9px);
}

【讨论】：

【解决方案5】：

这对我有用

.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;
}

演示：STACKBLITZ

【讨论】：