始终在 md-slider 中显示评级气泡

Question

我正在 md-slider md-discrete 模式。但是，我想像这样一直显示滑块气泡：

我不希望这个气泡在我点击其他地方时消失。有办法做到这一点吗？

Answer 1

您可以通过覆盖一些 css 规则来做到这一点，默认情况下气泡将仅在 active/focus 状态期间显示，通过以下规则：

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

因此，您可以通过制定一个始终显示它的绝对规则来覆盖它。即：

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

另一种快捷方式是使用 onblur="this.focus()"，如下所示：

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

在 javascript 里面做：

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

Answer 3

None 其他解决方案对我有用。唯一对我有用的是将 css class“_md-active”添加到滑块。

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

Answer 4

md-slider 包含 2 个部分：md-track-container 和 md-thumb-container。您可以通过css修改您需要的部分。这是要显示的图像和代码。

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

Answer 5

始终显示气泡

.mat-slider-horizontal .mat-slider-thumb-label {
    transform: rotate(45deg) !important;
}

要显示的文字

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

更改缩略图的颜色

.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb, 
.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label {
    background-color: green;
}

更改填充颜色

.mat-accent .mat-slider-track-fill, .mat-accent .mat-slider-thumb, .mat-accent .mat-slider-thumb-label {
    background-color: $greenColor;
}

Answer 6

这种方法对我有用：

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

此解决方案来自 michaelpwilson：https://github.com/angular/components/issues/4803

始终在 md-slider 中显示评级气泡

Always display the Rating bubble in md-slider

css

angularjs

angular-material