Angular Material mat-slider with fixed thumblabel

Question

I would like to use a mat-slider with a thumblabel that doesn't move along with the slider when it is moved. The way I see it the entire 'mat-slider-thumb-container' gets moved along the slider with the 'transform:translateX(xx%)' style So I would guess if I add a the same style but with -xx% to the 'mat-slider-thumb-label' it should always be in the center of the slider?

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

Now, first of all how does angular get the xx% and how could I get this value? A workaround would be to just calculate the percentage with the actual value and the min/max values of the slider but angular must store this percentage in some variable, so it feels to me as if it would be much more elegant to use that same variable angular must be using.

I tried to use a directive to add the style of 'tranform:translateX(xx%)' to the element with 'mat-slider-thumb-label' class but it seems to ignore it. It works perfectly fine, when I add other styles e.g.: background-color or width but transform seems to be totally ignored and I don't really understand why.

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

I also tried other values for transform like px instead of % or to rotate the element but nothing seems to work.

my html:

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

This is the first question that I actually post here, I hope I expressed my problem clearly enough, all suggestions to find a solution welcome

Anbesa Anbesa · Accepted Answer · 2021-01-19T16:05:28

Alright. I think I found the issue of my problem. Somewhere in my css there was another transform with !important on the mat-slider-thumb-label class...

Angular Material mat-slider with fixed thumblabel

1 Answers