[Bug Report][3.4.4] v-range-slider height isn't adjustable if you set direction to "vertical"

[Trash0101]

Environment

Vuetify Version: 3.4.4 Vue Version: 3.4.0-alpha.3 Browsers: Firefox 119.0 OS: Linux x86_64

Steps to reproduce

Set any v-range-slider direction prop to "vertical" and adjust it's height with CSS.

Expected Behavior

Element height changes according to provided CSS value

Actual Behavior

Element height always stays the same

Reproduction Link

https://play.vuetifyjs.com/#...

[Trash0101]

I think problem is the same for the regular v-slider component or i'm just missing something

[shengzhou1216]

Because v-range-slider is not a simple html element, your provided css does not apply to the corect element. The following code may work for you.

<style scoped>
  :deep(.v-slider.v-input--vertical > .v-input__control) {
    min-height: 100px !important;
  }
</style>

You can see more about scoped and :deep at here scoped-css

[Trash0101]

Because v-range-slider is not a simple html element, your provided css does not apply to the corect element. The following code may work for you.

<style scoped>
  :deep(.v-slider.v-input--vertical > .v-input__control) {
    min-height: 100px !important;
  }
</style>

You can see more about scoped and :deep at here scoped-css

I've already tried deep selectors. It doesn't work. I still can't make element height less than 300px. The only way i can achieve desired result is with "transform", but it's a mess to work with

[timolson]

The deep style setting worked for me, but Vuetify expects users to figure that out with just the documentation of "use css?"

+1 for adding a vertical-height property, but this deep-style answer should at least make it onto the documentation page.