取消链接mat-slider thumb与滑块进度条上的标签值

时间:2019-11-12 14:58:02

标签: javascript html css angular angular-material2

我想为mat-slider拇指标签选择一个值,为水平条进行选择另一个值

enter image description here

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

enter image description here

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

我不知道该如何编程,因为黄色栏的值是从父组件动态发送的,而html组件是mat-slider的子组件,因此我无法从模板文件设置类< / p>

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

这里是reproduction

0 个答案:

没有答案