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

Question

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?

score 0 · Accepted Answer · answered Nov 20 '20 at 21:09

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:

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

1 Answers1