Visualizza sempre la bolla di valutazione in md-slider

Question

Sto passando attraverso md-slider nella modalità md-discrete. Tuttavia, voglio visualizzare la bolla dispositivo di scorrimento per tutto il tempo in questo modo:

non voglio questa bolla a scomparire quando clicco altrove. C'è un modo per farlo?

Answer 1

Si potrebbe fare sovrascrivendo alcune regole CSS, per impostazione predefinita le bolle verranno visualizzate solo durante attiva/concentrarsi stati via di seguito regola:

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

Così si può semplicemente ignorare facendo una regola assoluta da visualizzare sempre. cioè:

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

Answer 2

Un altro modo di collegamento può essere utilizzando onblur="this.focus()" come questo:

<md-slider id="my-slider" flex onblur="this.focus()" md-discrete ng-model="3" min="1" max="5" aria-label="rating"> 

E dentro javascript fare:

$("#my-slider").focus(); 

Answer 3

Nessuno delle altre soluzioni ha funzionato per me. L'unica cosa che ha funzionato per me è l'aggiunta della classe css "_md-active" al cursore.

document.getElementById("YOUR-MD-SLIDER-ID").className += " _md-active"; 

Answer 4

md-slider contengono 2 parti: md-track-container e md-thumb-container. È possibile modificare la parte necessaria per css. Ecco l'immagine da mostrare e anche il codice.

<md-slider title="md-title" style="margin-top: -31px;margin-left: 45px;" id="red-slider" md-discrete="" round="0" ng-model="" step="5" min="0" max="100" aria-label="rating" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-empty" tabindex="0" role="slider" aria-valuenow="55" aria-invalid="false" aria-valuemin="0" aria-valuemax="100"> 
<div class="md-slider-wrapper"> 
    <div class="md-track-container"> 
     <div class="md-track"></div> 
     <div class="md-track md-track-fill" style="width: 55%;"></div> 
     <div class="md-track-ticks"><canvas style="position:absolute;" width="151" height="5"></canvas> </div> 
    </div> 
    <div class="md-thumb-container" style="left: 55%;"> 
     <div class="md-thumb"></div> 
     <div class="md-focus-thumb"></div> 
     <div class="md-focus-ring"></div> 
     <div class="md-sign"><span class="md-thumb-text">55</span></div><div class="md-disabled-thumb"></div> 
    </div> 
</div> 
</md-slider> 

CSS:

md-slider[md-discrete] .md-track-container, 
md-slider[md-discrete] .md-track-container:after { 
    height: 5px; 
} 

md-slider[md-discrete] .md-track-ticks, 
md-slider[md-discrete] .md-track-ticks:after { 
    display: none; 
}