更改“材质滑块”的拇指大小

Question

所以我有一个使用Mat Slider的项目，并且在拇指上显示了文本值，但是拇指大小对于我的文本来说太小了！ 我很想办法改变拇指的大小，但没有找到任何东西！ 我的CSS不太好，所以我无法弄乱它以使其变得可行！你能帮我么 ？

编辑：

我希望这个词适合拇指

Answer 1

我认为您正在寻找类似的东西

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 2

我现在有这个确切的问题，经过一番看后，我认为我有一个不错的解决方案 您可以使用:: 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 3

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

::ng-deep 
   .mat-slider 
   .mat-slider-wrapper 
   .mat-slider-thumb-container 
   .mat-slider-thumb-label:hover {
    margin-top: -60px!important;
    width: 80px!important;
    height: 80px!important;
    right: -40px;
    top: -40px;
}

Answer 4

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