如何改变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

您应该能够使用以下命令来修复它：

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

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

Answer 3

您应该能够使用!important覆盖样式，如下所示：

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