我最近需要用Vuetify制作一个渐变滑块，诀窍是针对组件css。我使用一个自定义类来确保我只影响所需的示例。

示例：

• • HTML**

<v-slider class="CustomSlider"></v-slider>

• • CSS**

.CustomSlider .v-slider__track-container {
  background-image: linear-gradient(
    to right,
    rgb(13, 8, 135),
    rgb(225, 100, 98),
    rgb(240, 249, 33)
  ) !important;
  height: 30px;
}

.v-application .CustomSlider .v-slider__track-fill.black {
  opacity: 0;
}

.v-application .CustomSlider .v-slider__track-fill.primary {
  opacity: 0.5;
  border-color: rgba(50, 50, 50, 250) !important;
  background-color: rgba(50, 50, 50, 250) !important;
}

.v-application .CustomSlider .v-slider__track-background.primary.lighten-3 {
  border-color: rgba(0, 0, 0, 0) !important;
  background-color: rgba(0, 0, 0, 0) !important;
}

下面是一个例子：Code Pen Example