样式材质滑块

Question

使用@angular/material 12.2

我想给这些刻度添加一些样式(宽度和颜色)我可以通过修改类。mat-slider-ticks和。mat-slider-ticks-container来改变刻度高度，但它不能用于宽度和颜色。

从angular/components源代码中，我发现了这个:

.mat-slider-ticks {
@include vendor-prefixes.private-background-clip(content-box);
background-repeat: repeat;
box-sizing: border-box;
opacity: 0;
transition: opacity variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
}

Answer 1

我可以用以下规则做到这一点。请注意，我使用custom-slider类将mat-slider包装在div中，以避免使用!important。但是，如果你不介意覆盖!important，你可以在全局样式中只包含内部规则。

.custom-slider {
.mat-mdc-slider .mdc-slider__tick-mark--active,
.mat-mdc-slider .mdc-slider__tick-mark--inactive {
height: 4px;
width: 4px;
background-color: red;
}
}

https://stackblitz.com/edit/angular-ygsg95?file=src%2Fstyles.scss