禁用 mat-slider 上的交互并保持 css 样式

Question

我正在尝试制作一个始终在屏幕上带有拇指标签的只读垫滑块。

我有我的 mat-slider 组件

<mat-slider
    class="example-margin"
    [disabled]="false"
    [thumbLabel]="true"
    [tickInterval]="tickInterval"
    [(ngModel)]='value'
    >
</mat-slider>

为了让缩略图标签始终可见，我使用了这些 css 属性

::ng-deep .mat-slider-thumb-label {
  transform: rotate(45deg) !important;
  border-radius: 50% 50% 0 !important;
}

::ng-deep .mat-slider-thumb {
  transform: scale(0) !important;
}

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

}

为了停止与 mat-slider 的交互，我使用了 disabled=true，但是当我这样做时，样式消失了，拇指标签也消失了，然后我在栏中得到一个空的 space

这是我想要的，但禁用了交互

这里是Demo

Answer 1

禁用它不会像预期的那样工作。一种解决方案是覆盖禁用的 class 样式，这将是很多而不是最佳解决方案。

我建议只禁用指针事件。

例如

.example-margin {
  pointer-events: none;
}

这将不允许指针交互，您的用例已解决:)

Answer 2

这可以通过在控件上禁止指针事件来实现。我已经修改了一些 CSS 并且指针事件也被禁用了。

CSS

::ng-deep .mat-slider-thumb-label {
   transform: rotate(45deg) !important;
   background-color: #ffd740 !important;  <-- make color important so it will not change or disappear in any condition
   border-radius: 50% 50% 0 !important;
}

添加了内联样式

style="pointer-events: none;"

Stackbliz URL : https://stackblitz.com/edit/angular-fkzv3z

Answer 3

分享在 Angular 8 中工作的解决方案，而无需使用 ::ng-deep（见下面的注释）

在您的垫子滑块中指定以下内容

class:"cdk-focused"
风格：指针事件：none

样本HTML代码碎片

            <mat-slider class="cdk-focused" style="pointer-events:none;" min="0" max="100" thumbLabel="true"
                disabled="false" [value]="item.percent" [displayWith]="formatPercentage">
            </mat-slider>

注: ng-deep is deprecated

禁用 mat-slider 上的交互并保持 css 样式

Disable interactions on mat-slider and keeping css styles

html

javascript

css

angular-material2

angular