Components: MdSlider custom thumb label text

Created on 24 May 2017 · 9Comments · Source: angular/components

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>

P4 feature needs discussion

Source

Snesi

👍4

Most helpful comment

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

willshowell on 25 May 2017

👍11

All 9 comments

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

Snesi on 24 May 2017

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

willshowell on 25 May 2017

👍11

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

[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
.

Snesi on 25 May 2017

👍1

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

willshowell on 25 May 2017

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.