默认情况下如何显示mat-slider-ticks

如何解决默认情况下如何显示mat-slider-ticks

我想在视图加载后默认显示mat-slider-ticks。

但是不幸的是，只有当我将鼠标悬停在或选中它时，才出现刻度线。 下面是代码：

<mat-slider class="width" [disabled]="false" [max]="max" [min]="min" [step]="step"
  [tickInterval]="tickInterval" [(ngModel)]="value" (change)="updatedInterval()">
</mat-slider>

下面是在视图上渲染的垫式滑块：

<mat-slider 
  _ngcontent-ihs-c288="" 
  role="slider" 
  class="mat-slider mat-focus-indicator width mat-accent mat-slider-has-ticks mat-slider-horizontal mat-slider-min-value ng-pristine ng-valid ng-touched" 
  ng-reflect-disabled="false" 
  ng-reflect-is-disabled="false"
  ng-reflect-max="60" 
  ng-reflect-min="30" 
  ng-reflect-step="0.1" 
  ng-reflect-tick-interval="50"
   ng-reflect-model="30" 
  tabindex="0" 
  aria-disabled="false" aria-valuemax="60" aria-valuemin="30" aria-valueNow="30" aria-orientation="horizontal">
  <div class="mat-slider-wrapper">
    <div class="mat-slider-track-wrapper">
      <div class="mat-slider-track-background" ng-reflect-ng-style="[object Object]" style="transform: translateX(7px) scale3d(1,1,1);"></div>
      <div class="mat-slider-track-fill" ng-reflect-ng-style="[object Object]" style="transform: translateX(-7px) scale3d(0,1); display: none;"></div>
    </div>
    <div class="mat-slider-ticks-container" ng-reflect-ng-style="[object Object]" style="transform: translateX(-8.33333%);">
      <div class="mat-slider-ticks" ng-reflect-ng-style="[object Object]" style="background-size: 16.6667% 2px; transform: translateZ(0px) translateX(8.33333%); padding-left: 7px;"></div>
    </div>
    <div class="mat-slider-thumb-container" ng-reflect-ng-style="[object Object]" style="transform: translateX(-100%);">
      <div class="mat-slider-focus-ring"></div>
      <div class="mat-slider-thumb"></div>
      <div class="mat-slider-thumb-label">
        <span class="mat-slider-thumb-label-text">30</span>
      </div>
    </div>
  </div>
</mat-slider>

请注意，我不想在全球范围内更改CSS。我想将CSS添加到各个组件中。