更改材质滑块拇指大小

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 !
}

Answer 5

使用 Angular 15 / Material 15 你需要这样的东西：

模板：

<mat-slider class="mySlider" ...>

CSS：

.mySlider {
  width: 500px !important;
}
.mySlider
  .mdc-slider__thumb--with-indicator
  .mdc-slider__value-indicator-container
  .mdc-slider__value-indicator {
  width: 200px;
}
.mySlider
  .mdc-slider__thumb--with-indicator[ng-reflect-thumb-position='1']
  .mdc-slider__value-indicator-container
  .mdc-slider__value-indicator {
  background-color: red;
}
.mySlider
  .mdc-slider__thumb--with-indicator[ng-reflect-thumb-position='2']
  .mdc-slider__value-indicator-container
  .mdc-slider__value-indicator {
  background-color: green;
}

您也可以删除

class

中的

slider

并仅使用

mat-slider

代替，但据我所知，这是非法的样式。基本上也喜欢使用

::ng-deep

。这就是我在这个例子中使用

encapsulation: ViewEncapsulation.None

的原因。

看看这个工作示例： https://stackblitz.com/edit/angular15-material-range-slider-styling

Answer 6

这在 Angular 18 中仍然是一个挑战，但我发现您可以使用 CSS 自定义属性（在全局 CSS 中）来自定义拇指标签。 例如：

.my-custom-mat-slider {
  --mat-slider-value-indicator-container-transform: translateX(-50%);
  --mat-slider-value-indicator-width: auto;
  --mat-slider-value-indicator-height: 24px;
  --mat-slider-value-indicator-caret-display: block;
  --mat-slider-value-indicator-border-radius: 4px;
  --mat-slider-value-indicator-padding: 0 8px;
  --mat-slider-value-indicator-text-transform: none;
}