3

I try to change the height of the v-slide bar, I have tried with the directive of the component but it only changes the height of the container and I have also tried to overwrite the css with the classes

Any suggestions?

Component: https://vuetifyjs.com/en/components/sliders#sliders

Victor
  • 127
  • 1
  • 11

3 Answers3

8

It's been a while, but here is my answer.

Try this:

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

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

If you want to learn how this works, read this. Also I found this answer, there is explained in more detail.

Here is my result:

enter image description here

Please if this was helpful to you, mark this as a correct answer:)

aang
  • 111
  • 1
  • 8
  • I appreciate your answer, but this question has already been answered by the Vuetify support team, I cannot contrast whether your comment is correct because the application version has undergone several changes. Anyway thanks for sharing an answer. – Victor Jul 31 '20 at 13:28
  • 4
    Great! Maybe it would be helpful if you share what they answered to you. Just to know if this is the best way to modify the components. :) @Victor – aang Aug 02 '20 at 22:03
  • The note won't work with scss or sass. Must be regular CSS to work – Marcello B. Apr 22 '21 at 22:57
2

You should be able to fix it with:

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

The track container needs to be increased to show the larger line and the track needs to be increased to have a larger line.

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Anthony Foote
  • 21
  • 2
  • Welcome to Stack Overflow. Code snippets are reserved for code that will execute, I've converted yours over to just a formatted code block. – Jason Aller Jun 12 '20 at 20:41
0

You should be able to overwrite the styles with !important like this:

   .v-slider__track-container{
      height: 10px !important;
    }
Marcel Pahnke
  • 1
  • 1
  • still not working, all this style I use within a single component but in my compiled project the class doesnt even appear – Victor Sep 18 '19 at 14:39