CODEWITHSUNDEEP
angularangular-materialmat-slider
ruddnisrus
ruddnisrus

Reputation: 245

Angular material mat-slider does not react to programmatically triggered event

I want to create test for mat-slider but looks that it doesn't react to events dispatched programmatically

@Component({
    selector: 'slider-show',
    templateUrl: 'slider-show.html',
})
export class SliderShow {
    constructor(private elementRef: ElementRef) {}

    dispatchFakeEvent() {
        const matSlider = this.elementRef.nativeElement.querySelector('.mat-slider-ticks');
        const dimensions = matSlider.getBoundingClientRect();
        const percentage = 0.5;

        matSlider.dispatchEvent(new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window,
            detail: 0,
            clientX: Math.round(dimensions.right * percentage),
            clientY: Math.round(dimensions.bottom * percentage)
        }));
    }
}

<mat-slider>
    <input matSliderThumb>
</mat-slider>

<button (click)="dispatchFakeEvent()">
    ACTION
</button>

In material version 6 that works, any ideas why it doesn't work now or how to resolve it?

Upvotes: 1

Views: 126

Answers (0)

Related Questions