Angular Material 带有固定缩略图标签的垫子滑块

Question

我想使用带有缩略图标签的垫子滑块，当滑块移动时，它不会随滑块一起移动。我看到它的方式是整个 'mat-slider-thumb-container' 以 'transform:translateX(xx%)' 样式沿着滑块移动所以我想如果我添加一个相同的样式，但在 'mat-slider-thumb-label' 中添加 -xx%，它应该始终位于滑块的中心？

<div class="mat-slider-thumb-container" style="transform: translateX(-100%);" ng-reflect-ng-style="[object Object]"><div class="mat-slider-focus-ring"></div><div class="mat-slider-thumb"></div><div class="mat-slider-thumb-label"><span class="mat-slider-thumb-label-text">0</span></div></div>

现在，首先 angular 如何获得 xx% 以及我如何获得该值？一种解决方法是仅使用滑块的实际值和 min/max 值计算百分比，但 angular 必须将此百分比存储在某个变量中，所以我觉得它会更多优雅地使用相同的变量 angular 必须使用。

我尝试使用指令将 'tranform:translateX(xx%)' 的样式添加到具有 'mat-slider-thumb-label' class 的元素，但它似乎忽略了它。它工作得很好，当我添加其他样式时，例如：背景颜色或宽度，但转换似乎被完全忽略，我真的不明白为什么。

export class FixThumbLabelDirective implements OnChanges {
    constructor(private renderer: Renderer2, private elRef: ElementRef) {}
    @Input() thumbLabelPos: number;

    ngOnChanges() {
        this.renderer.setStyle(
            this.elRef.nativeElement.children[0].children[2].children[2],
            'transform',
            'translateX(' + this.thumbLabelPos * 10 + 'px)'//this obviously needs a properly calculated % value , just put it that way to make changes definitely noticeable
        );
        console.log(this.thumbLabelPos);
    }
}

我还尝试了其他变换值，例如 px 而不是 % 或旋转元素，但似乎没有任何效果。

我的html:

<mat-slider appFixThumbLabel [thumbLabelPos]='value' [(ngModel)]="value" 
  value="value" thumbLabel >
</mat-slider>

这是我真正post这里的第一个问题，我希望我把我的问题表达得足够清楚，欢迎大家提出解决方案的建议

Answer 1

好的。我想我找到了我的问题所在。在我的 css 中的某个地方，mat-slider-thumb-label class...

上有另一个带有 !important 的转换

Angular Material 带有固定缩略图标签的垫子滑块

Angular Material mat-slider with fixed thumblabel

angular

angular-material

angular-directive

angular-renderer2