如何更改V型滑块的尺寸？

Question

我尝试更改v型滑杆的高度，尝试使用组件的指令，但它仅更改容器的高度，并且还尝试使用类覆盖css

有什么建议吗？

组件：https://vuetifyjs.com/en/components/sliders#sliders

Answer 1

已经有一段时间了，但这是我的答案。

尝试一下：

  >>>.v-slider__thumb {
    height: 20px;
    width: 20px;
  }

  >>>.v-slider--horizontal .v-slider__track-container {
    height: 10px;
  }

如果您想了解其工作原理，请阅读this。 我也发现了这个answer，这里有更详细的解释。

这是我的结果：

请，如果这对您有所帮助，请将其标记为正确答案：）

Answer 2

您应该可以使用!important覆盖样式 像这样：

   .v-slider__track-container{
      height: 10px !important;
    }

Answer 3

您应该可以通过以下方式修复它：

.v-slider__track-container {
   height: 10px;
}
.v-slider__track {
   height: 10px;
}

需要增加跟踪容器以显示较大的线，并且需要增加跟踪以具有较大的线。