CODEWITHSUNDEEP
angulartypescriptangular-material
Felix Christo
Felix Christo

Reputation: 287

Custom Range Slider

I am trying to do a custom range slider in Angular Material. But I don't know how to change the default size and color. Can any one help me with that.

HTML

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

What I am Getting

What I Have

What I Need

What I What

Upvotes: 0

Views: 2109

Answers (1)

farhan siddiqui
farhan siddiqui

Reputation: 342

Please update this style in your 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;
}

Upvotes: 1

Related Questions