How to add an extra, static thumb label to an angular material slider (mat-slider)?

I'd like the users to be able to see the original value of the slider as a reference point as they select a new value.

So I'd like to add an extra thumb label (351) like this:

I know this isn't supported by the mat-slider in the documentation, but I'm wondering if there's a hacky way to do this. I'm new to angular material and not super strong in css.

Or maybe there are other component libraries/alternative implementations that would support this?

I don't know how to update/hack angular material to do this.

But I did find one slider implementation from NG-Zorro that has support for labels (or "marks" as they call them).

Other libraries that I looked at that did not support this:

• https://material.angular.io/components/slider/overview
• https://clarity.design/documentation/range#examples
• https://www.primefaces.org/primeng/showcase/#/slider
• https://ng-bootstrap.github.io/#/components
• https://edcarroll.github.io/ng2-semantic-ui/#/getting-started
• https://valor-software.com/ngx-bootstrap/#/documentation