Mat-Slider changes text color despite color code

Question

I have a component in my project with some text and a conditional mat-slider.

When mat-slider is hidden, my text looks like this:

And when it is visible, my text looks like this:

My code:

<mat-slider *ngIf="isVisible" [min]="minValue" [max]="maxValue" [step]="stepValue" [thumbLabel]="true" [tickInterval]="1"></mat-slider>
<div style="color: #0089D6; font-size: 13px; font-weight: 500;">This is a sample text.</div>

Color code doesn't change and I've looked for any css override, but I couldn't find anything. However, color changes as seen above. Why is this happening?

Answer 1

Just using the code you provided I didn't have the same issue. Must be something else outside your code that's causing this.

https://stackblitz.com/edit/angular-sh21iw?file=src/app/slider-overview-example.html