MdSlider custom thumb label text

[Snesi]

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:

<span class="mat-slider-thumb-label-text">{{displayPrefix}}{{displayValue}}{{displaySuffix}}</span>

[Snesi]

If I have time to do this I'll create a pull request tomorrow.

[willshowell]

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`;
}

[Snesi]

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 notifications@github.com wrote:

Instead of prefix/suffix, what about something similar to autocomplete's displayWith?

comp.html

<md-slider [thumbLabel]="true" [displayLabelAs]="labelFn">

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 https://github.com/angular/material2/issues/4776#issuecomment-304103918, or mute the thread https://github.com/notifications/unsubscribe-auth/AAyu3aBL2zMYI0VvHQm3G5r_YyPlPSDGks5r9dlMgaJpZM4NlVGY .

[willshowell]

Yeah, I suppose resizing the label and making sure the animation looks right for a dynamic label string would be pretty difficult

[YeomansIII]

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.

[iget-master]

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 Noticed that the version 6 now implements it!. Really waiting for it being published.

[mmalerba]

Added in #10243

[pantonis]

Any example of how it works would be good. Currently material does not have any example on how to use displayValue

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}