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

Question

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

编辑：

我希望这个词适合拇指

标签： cssangular-materialsizemat-slider

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，但是当使用更大的高度值测试它时，它并没有像我预期的那样工作，所以在你得到之前修补他的顶部所需的位置。