Reputation: 287
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 Need
Upvotes: 0
Views: 2109
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