设置 Angular Material Slider 的样式，使其更厚/更高 [英] Style the Angular Material Slider so that it is thicker / taller

问题描述

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

I'm having problems finding the magic sauce here.. It doesn't look like the API supports it, so I guess I'm looking for some CSS to make the slider bigger.

我要的是左边那个，但我想把它设计成右边那个?任何 CSS 技巧或之前是否有人这样做过.

I am getting the one on the left, but I would like to style it like the one on the right? Any CSS tricks or has anyone done this before.

特别是条"的高度.有一百万个东西设置为高度:2px.我试着把它们都加起来，但没有任何改变..我想可能是边框或其他什么?

Specifically the height of the 'bar'. there are a million things set to height: 2px. i tried upping all of them but nothing changed.. i guess maybe it's a border or something else?

提前致谢！

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

StackBlitz: https://stackblitz.com/angular/kkmmddyaegp?file=app%2Fslider-overview-example.css (Thanks @Andriy)

推荐答案

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

You can try to add this CSS to global style:

.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

如果您需要在任何组件的 CSS 文件中使用默认封装的这些样式，只需添加::ng-deep 在每个 CSS 规则之前(但要注意它的长期存在弃用，因此请检查每个新版本的 Angular):

if you need to have these styles in any component's CSS file with default encapsulation, just add ::ng-deep before each CSS rule (but be aware of its long going deprecation, so check it with each new versions of 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

if using SASS, just wrap your code with ::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 范围.

Please note, that this way your CSS will affect global CSS scope.

这篇关于设置 Angular Material Slider 的样式，使其更厚/更高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！