Make slider thumb label always visible

[michaelpwilson]

Bug, feature request, or proposal:

Feature request

What is the expected behaviour?

I would like the thumb label to remain visible, not just when the slider is being changed.

What is the current behaviour?

The slider thumb label will only show when the slider is being moved.

https://material.angular.io/components/component/slider

What is the use-case or motivation for changing an existing behaviour?

I don't think existing behaviour should be changed, but maybe an input can be given to <md-slider> which tells it whether to always display the thumb label.

From a design point of view, it is nice to be able to let the user know what the current value is for the slider.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

TypeScript 2.3.3
Angular 4.1.3
Angular Material 2.0.0-beta.5

[ocarreterom]

The slider is following the MD specs https://material.io/guidelines/components/sliders.html#sliders-discrete-slider

[willshowell]

@michaelpwilson you can override it with css for now if you wish

.mat-slider-thumb-label {
  transform: rotate(45deg) !important;
  border-radius: 50% 50% 0 !important;
}

.mat-slider-thumb {
  transform: scale(0) !important;
}

.mat-slider-thumb-label-text {
  opacity: 1 !important;
}

[mmalerba]

Not in the spec, but seems reasonable

[michaelpwilson]

Thanks @willshowell! This works apart from when the value is 0.

[CDMU]

Hi @michaelpwilson , could you share your method ?
Because I've try to override the css but not work at all, thanks.

[eroak]

@CDMU You should try to wrap the @michaelpwilson method with : ::ng-deep { }

::ng-deep {

  .mat-slider-thumb-label {
    transform: rotate(45deg) !important;
    border-radius: 50% 50% 0 !important;
  }
  
  .mat-slider-thumb {
    transform: scale(0) !important;
  }
  
  .mat-slider-thumb-label-text {
    opacity: 1 !important;
  }

}

[vsarathy]

Is there a way to make the thumb label appear at the bottom instead?

[mmalerba]

Rather than add an option for this to the mat-slider, we will create a cdk-slider that people can use if they want to be able to customize beyond what the mat-slider supports. Follow #10774

[angular-automatic-lock-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.}