unlink mat-slider thumb Label value from slider's bar progression

I would like to choose a value for the mat-slider thumb Label and another value for the horizontal bar progression

Here what I expect ( I have used devtools to get the result

I have noticed that I should change css values of mat-slider-track-background ==> grey line and mat-slider-track-fill ==> yellow line

I don't know how to do it programmatically because the value of the yellow bar is send dynamically from the parent component and the bar html component is a child of mat-slider so I can't set class from template file

<mat-slider
    class="example-margin"
    [disabled]="false"
    [invert]="invert"
    [max]="max"
    [min]="min"
    [step]="step"
    [thumbLabel]="true"
    [tickInterval]="tickInterval"
    [(ngModel)]='value'
    [vertical]="vertical">
</mat-slider>

In my ts file I have the second value and slider params :

export class SliderConfigurableExample {
  value2= 60; <== I would like this to be the bar value
}

Here's a reproduction