cssangularlinear-gradientsmat-slider

Angular mat-slider track fill customize with gradient

I have to customize a angular math-slider track fill with a gradient. I have try to override the mat-slider-track-fill has code below but it doesn't works.

.mat-slider-track-fill
 {
    background-color: linear-gradient(90deg, rgba(255,68,0,0.2637429971988795) 0%, rgba(255,255,255,1) 62%, rgba(0,164,255,0.3477766106442577) 100%); !important;
 }

enter image description here

My end result should be a track bar like this. If I use the "fixed color" (ex. yellow, red..) it works but if I try to use the gradient it doesn't. Can anyone help me?

Solution

  • There are two issues with your code:

    1. you have a semicolon right before !important which should be removed
    2. linear-gradient should be applied to css attribute property background, not background-color. Exchanging this property should resolve the issue.