Question

我在md-discrete模式下浏览md-slider。但是，我想一直显示滑块气泡，如下所示：

enter image description here

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

Answer 1

您可以通过覆盖某些css规则来执行此操作，默认情况下，仅在活动/焦点状态期间通过以下规则显示气泡：

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

其他解决方案都不适合我。唯一对我有用的是添加css类＆＃34; _md-active＆＃34;滑块。

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中显示Rating bubble

6 个答案: