javascript - 从滑块的进度条中取消链接 mat-slider thumb 标签值

Question

我想为 mat-slider thumb Label 选择一个值，为水平条进度选择另一个值

这是我所期望的（我已经使用 devtools 来获得结果

我注意到我应该更改mat-slider-track-background==> 灰线和mat-slider-track-fill==> 黄线的 css 值

我不知道如何以编程方式执行此操作，因为黄色条的值是从父组件动态发送的，并且条 html 组件是 mat-slider 的子组件，因此我无法从模板文件中设置类

<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>

在我的 ts 文件中，我有第二个值和滑块参数：

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

这是一个复制品

标签： javascripthtmlcssangularangular-material2