0

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?

scorona85
  • 97
  • 6

1 Answers1

1

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.
Fabian Strathaus
  • 3,192
  • 1
  • 4
  • 26