Как я могу создать пользовательскую пузырьковую анимацию для большого пальца ползунка углового материала?

Я реализую ползунок углового материала для управления версиями контента. Требуется добавить пузырек, который будет следовать за ковриком-ползунком-большим пальцем по дорожке ползунка. Самая большая проблема заключается в том, чтобы запускать анимацию при каждом изменении положения коврика-ползунка-большого пальца. Я супер новичок в угловых анимациях, и я не могу начать. Буду признателен за любой отзыв!

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