Luôn hiển thị bong bóng Xếp hạng trong md-slider

Question

Tôi sẽ xem qua md-slider ở chế độ md-discrete. Tuy nhiên, tôi muốn hiển thị bong bóng trượt tất cả các thời gian như thế này:

Tôi không muốn bong bóng này biến mất khi tôi nhấp vào bất cứ nơi nào khác. Có cách nào để thực hiện việc này không?

Answer 1

Bạn có thể làm điều đó bằng cách ghi đè một số quy tắc css, theo mặc định các bong bóng sẽ được hiển thị chỉ trong thời gian hoạt động/tập trung tiểu bang thông qua dưới quy tắc:

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

Vì vậy, bạn chỉ có thể ghi đè lên bằng cách làm cho một quy tắc tuyệt đối để hiển thị nó luôn luôn. tức là:

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

Một cách khác shortcut có thể bằng cách sử dụng onblur="this.focus()" như thế này:

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

Và bên trong javascript làm:

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

Answer 3

Không các giải pháp khác làm việc cho tôi. Điều duy nhất làm việc cho tôi là thêm lớp css "_md-active" vào thanh trượt.

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

Answer 4

md-slider chứa 2 phần: md-track-container và md-thumb-container. Bạn có thể sửa đổi phần bạn cần bằng css. Đây là hình ảnh để hiển thị và mã cũng.

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