Change the width and height of a VSlider

[amine0110]

Hello,

I have been trying to update the width and height of a vertical VSlider but unfortunately, none of the options that I tried could acheive this.

Here is my section:

with html.Div(
                style=f"position:absolute; top:10%; right:{offset}px; transform:translateY(-20%); height:100%; display:flex; align-items:center;"
            ):
                vuetify.VSlider(
                    v_model=(slice_value, getattr(state, slice_value)),
                    min=0,
                    max=(max_slice, 100),
                    step=1,
                    vertical=True,
                    thumb_label="always",
                    classes="slice-slider",
                    style="height:100%; max-height: 100%; width:90%; max-width:90%;",
                    color="red",
                    hide_details=True,
                    dense=True,
                )

When I play with the width, max-width, height or max-height, they are just changing the size of the container (I suppose!) But they are not changing the actual size of the slider.

My end goal, is that I want to be able to fully customize it, change the width (thickness as it is vertical slider) and the height.

Can anyone help me with this? Thanks!

[jourdain]

I don't think Vuetify 2 give you much control on it. The Vuetify 3 does have more options...

Also when you write v_model=(slice_value, getattr(state, slice_value)),, you are asking trame to set an initial value to the state if it doesn't exist using the current value available in that state. In other words, that second argument is useless.

Instead you could just write v_model=slice_value (because it is a directive, you don't need the empty tuple).
Also you can replace any getattr(state, slice_value) by state[slice_value].

[amine0110]

Thank you.