Пользовательский Ползунок Диапазона

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