自定义范围滑块

Question

我正在尝试在Angular Material中创建自定义范围滑块。但是我不知道如何更改默认大小和颜色。有人可以帮我吗？

HTML

<mat-slider thumbLabel max="30" value="10"></mat-slider>

我正在得到什么

我需要什么

Answer 1

请在您的CSS中更新此样式

    .mat-accent .mat-slider-thumb, .mat-accent .mat-slider-thumb-label, .mat-accent .mat-slider-track-fill {
    background-color: #fd7175;
    z-index: 1;
}

.mat-slider-horizontal .mat-slider-ticks-container {
    background-color: #986ed8;
}

.mat-slider-thumb {
    position: absolute;
    right: -5px;
    bottom: -10px;
    box-sizing: border-box;
    width: 7px;
    height: 20px;
    border: 3px solid transparent;
    border-radius: 0;
    transform: scale(.7);
    transition: transform .4s cubic-bezier(.25, .8, .25, 1), background-color .4s cubic-bezier(.25, .8, .25, 1), border-color .4s cubic-bezier(.25, .8, .25, 1);
}

.mat-accent .mat-slider-thumb-label-text {
    color: #ab42ab;
}

.mat-slider:not(.mat-slider-disabled).cdk-focused .mat-slider-thumb-label {
    border-radius: 50% 50% 0;
    background-color: transparent;
}