How can I create custom bubble animation for angular material slider thumb?

Question

I'm implementing angular material slider for content versioning. There is a requirement to add bubble that would follow mat-slider-thumb along the slider track. The biggest problem is to trigger animation on every mat-slider-thumb position change. I'm super new to angular animations and I can't get it started. I would appreciate any feedback!

<div fxLayout="column" fxFlex="100">
    <p><strong>Compare version</strong></p>
    <mat-slider 
        [disabled]="disableSlider"
        tickInterval="1" 
        [step]="revisionsCount" 
        color="primary" class="slider" 
        (input)="getCurrentVersion($event)">
    </mat-slider>
<!-- here is the bubble that could follow along -->
    <span class="slider-cloudet" *ngIf="revision !== undefined">
        <mat-icon>today</mat-icon>
        {{ revision.date | date: 'dd-MM-yyyy' }}
        <mat-icon>restore</mat-icon>
        {{ revision.date | date: 'HH:mm' }}
    </span>
</div>

Answer 1

According to this question: Parameter into animation you can add your output from the mat-slider to your bubble component/animation.

The answer also provides an example that fits to your problem.