CSS 将 Angular Material 滑块样式改为更宽/更高

在本文中，我们将介绍如何使用CSS样式来修改Angular Material滑块的尺寸，使其更加宽度或高度。我们将通过示例说明这个过程，并提供详细的步骤和代码。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

1. CSS修改滑块尺寸

要修改Angular Material滑块的尺寸，我们可以使用CSS的宽度（width）和高度（height）属性。首先，让我们来看一下如何使用CSS将滑块的宽度增加。

.mat-slider-horizontal .mat-slider-thumb {
  width: 20px;
}

.mat-slider-horizontal .mat-slider-track-wrapper {
  height: 10px;
}

在上面的示例中，我们使用CSS选择器.mat-slider-horizontal .mat-slider-thumb和.mat-slider-horizontal .mat-slider-track-wrapper来选择滑块的拇指（thumb）和滑轨（track）部分。然后，我们使用width属性将拇指的宽度设置为20px，使用height属性将滑轨的高度设置为10px。通过修改这些值，您可以根据需要调整滑块的宽度和高度。

2. CSS修改滑块背景颜色

除了修改尺寸，您还可以使用CSS来更改Angular Material滑块的背景颜色。以下是一个示例，展示如何使用CSS来将滑块的背景颜色设置为红色。

.mat-slider-horizontal .mat-slider-track-wrapper {
  background-color: red;
}

.mat-slider-horizontal .mat-slider-track-fill {
  background-color: red;
}

在上面的示例中，我们使用CSS选择器.mat-slider-horizontal .mat-slider-track-wrapper和.mat-slider-horizontal .mat-slider-track-fill来选择滑块的滑轨和填充部分。然后，我们使用background-color属性将滑轨和填充的背景颜色都设置为红色。通过修改这些值，您可以根据需要改变滑块的背景颜色。

3. CSS修改滑块边框样式

要修改滑块的边框样式，您可以使用CSS的border属性。以下是一个示例，展示如何使用CSS来添加滑块的边框样式。

.mat-slider-horizontal .mat-slider-thumb {
  border: 2px solid black;
}

.mat-slider-horizontal .mat-slider-track-wrapper {
  border: 1px solid black;
}

在上面的示例中，我们使用CSS选择器.mat-slider-horizontal .mat-slider-thumb和.mat-slider-horizontal .mat-slider-track-wrapper来选择滑块的拇指和滑轨部分。然后，我们使用border属性为拇指和滑轨添加边框样式。通过修改这些值，您可以根据需要改变滑块的边框样式。