Issue
How can I display thumb label all the time for material slider?
above answer is not working on angular 16 material ui slider.
Can you please provide the solution for this.
Solution
It looks like on a slider with [discrete]="true"
the label container is always displayed, but it's contents are transformed using transform: scale(0)
, so it's not visible.
You should be able to override it easily by applying the proper transform to the proper element:
.mdc-slider .mdc-slider__value-indicator {
transform: scale(1);
}
Note that this style needs to have higher specificity than in the original material stylesheets, so you probably have to add a class to your slider, e.g.:
<mat-slider
class="always-on-indicator"
...
</mat-slider>
And then apply changes only to elements of that class:
.always-on-indicator {
&.mdc-slider .mdc-slider__value-indicator {
transform: scale(1);
}
}
Remember to put either put this in the global styles.scss, or enable style piercing.
Here's stackblitz example.
Answered By - TotallyNewb
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.