New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
MdSlider custom thumb label text #4776
Comments
If I have time to do this I'll create a pull request tomorrow. |
Instead of prefix/suffix, what about something similar to autocomplete's comp.html <md-slider
[thumbLabel]="true"
[displayLabelAs]="labelFn">
</md-slider> comp.ts labelFn(value: number): string {
return `${value} cm`;
} |
I like that a lot better! Right now I'm using an after pseudo element in
the span of the label in order to show square meters m2 next to the number.
Although I've also had to override the styles to make the label's wrapper
wider.
…On Thu, May 25, 2017, 21:41 Will Howell ***@***.***> wrote:
Instead of prefix/suffix, what about something similar to autocomplete's
displayWith?
*comp.html*
<md-slider
[thumbLabel]="true"
[displayLabelAs]="labelFn">
</md-slider>
*comp.ts*
labelFn(value: number): string {
return `${value} cm`;
}
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#4776 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AAyu3aBL2zMYI0VvHQm3G5r_YyPlPSDGks5r9dlMgaJpZM4NlVGY>
.
|
Yeah, I suppose resizing the label and making sure the animation looks right for a dynamic label string would be pretty difficult |
Any work being done on this? I can try and implement @willshowell's solution and make a pull request. We need this feature to show slider value as audio track time when dragging. This seems very valuable as it's open to any kind of formatting needed from value to label. |
Can someone take a look here? This is an important featore IMO. For example if you want a slider for a percent value or a currency value. Edit |
Added in #10243 |
Any example of how it works would be good. Currently material does not have any example on how to use displayValue |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Bug, feature request, or proposal:
Feature request
What is the expected behavior?
New Inputs in MdSlider to add a suffix or prefix to the thumb-label-text
What is the current behavior?
Thumb label text simply shows a number
What are the steps to reproduce?
Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U
What is the use-case or motivation for changing an existing behavior?
If you want a slider that has a specific unit, like $, or m2 or min.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Material 2
Is there anything else we should know?
simply something like this would do:
The text was updated successfully, but these errors were encountered: