Always display the Rating bubble in md-slider

Issue

I'm going through md-slider in md-discrete mode. However, I want to display the slider bubble all the time like this:

I dont want this bubble to disappear when I click anywhere else. Is there a way to do this ?

Solution

You could do it by overriding some css rules, by default the bubbles will be displayed only during active/focus states via below rule:

md-slider[md-discrete]:not([disabled]):focus .md-sign,
md-slider[md-discrete]:not([disabled]):focus .md-sign:after,
md-slider[md-discrete]:not([disabled]).active .md-sign,
md-slider[md-discrete]:not([disabled]).active .md-sign:after {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

So you can just override by making an absolute rule to display it always. i.e:

md-slider[md-discrete] .md-sign,
md-slider[md-discrete] .md-sign:after {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

Demo

Answered By - PSL