Question

我想使用带有拇指标签的垫子滑块，该滑块在移动时不会随滑块一起移动。我看到整个“垫子滑块拇指容器”的方式是沿着滑块移动的“变换：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% 的，我怎样才能获得这个值？一种解决方法是仅使用滑块的实际值和最小值/最大值来计算百分比，但 angular 必须将此百分比存储在某个变量中，因此我觉得使用相同的变量会更优雅角度必须使用。

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

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>

这是我在这里实际发布的第一个问题，我希望我足够清楚地表达了我的问题，欢迎所有寻求解决方案的建议

Answer 1

好的。我想我发现了我的问题。在我的 css 中的某个地方有另一个转换，在 mat-slider-thumb-label 类上使用 !important...

带有固定拇指标签的角形材料垫滑块

1 个答案: