Saurabh Verma Saurabh Verma - 4 months ago 86
AngularJS Question

Always display the Rating bubble in md-slider

I'm going through md-slider in

md-discrete
mode.
However, I want to display the slider bubble all the time like this:

enter image description here

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

PSL PSL
Answer

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

Comments