css - 更改材质滑块拇指大小

Question

所以我有这个项目，我在其中使用了 Mat Slider，我在它的拇指上显示文本值，但是拇指大小对于我的文本来说太小了！我寻找了很多改变拇指大小的方法，但我没有找到任何东西！我在 CSS 方面不是那么好，所以我不能乱用它来尝试让它工作起来！你能帮我么 ？

编辑：

我希望这个词适合拇指

Answer 1

我现在遇到了这个确切的问题，经过一番查看后，我认为我有一个不错的解决方案您可以使用 ::ng-deep 来定位垫滑块的拇指，这样代码看起来像

::ng-deep .mat-slider-wrapper {

  .mat-slider-thumb-container {
    .mat-slider-thumb-label {
      width: 50px;
      height: 50px;
      top: -62px;
      right: -25px;
    }
  }
}

宽度和高度可以从默认的 28px 更改为您想要的值

顶部和右侧有点不同，因此默认右侧是 -14px，即 -(1/2) * 宽度，因此您可以使用它来计算您的右侧。顶部有点不同。默认顶部是 -40px，所以我只是添加了 -(height - defaultHeight) 并得到了 -62，但是当使用更大的高度值测试它时，它并没有像我预期的那样工作，所以在你得到之前修补他的顶部所需的位置。

Answer 2

我想你正在寻找这样的东西

HTML

<mat-slider
  thumbLabel
  [displayWith]="formatLabel"
  tickInterval="1000"
  min="1"
  max="100000" class="cdk-focused"></mat-slider>

TS

import {Component} from '@angular/core';
@Component({
  selector: 'slider-formatting-example',
  templateUrl: 'slider-formatting-example.html',
  styleUrls: ['slider-formatting-example.css'],
})
export class SliderFormattingExample {
  formatLabel(value: number | null) {
    if (!value) {
      return 0;
    }

    if (value >= 1000) {
      return Math.round(value / 1000) + 'k';
    }

    return value;
  }
}

CSS

mat-slider {
  width: 300px;
}

Answer 3

.mat-slider-thumb-label-text {
    transform: rotate(0deg) !important;
    opacity: 1 !important;
    color: black !important;
}

.mat-slider:not(.mat-slider-disabled).cdk-focused .mat-slider-thumb-label {
    transform: rotate(0deg) !important;
    border-radius: 5px 5px 0 !important;
    width: 7rem !important;
    right: 0px !important;
    top: -30px !important;
}

Answer 4

我尝试了很多次：我找到了这个解决方案，希望对大家有所帮助。

::ng-deep 
   .mat-slider 
   .mat-slider-wrapper 
   .mat-slider-thumb-container 
   .mat-slider-thumb-label:hover {
    your code here !
}