Vertical Slider

Hi everyone,

Dash is increadible! Great work and a big thanks!

I am trying to create a vertical slider with with dcc.Slider utilizing the vertical=‘True’ attribute. However, instead of getting the vertical equivalent of the normal slider, I just encounter a slider contracted to a point. What am I doing wrong? Is it a CSS issue?

The code is very simple, as far as I understood:

    marks={i: '{}'.format(10 ** i) for i in range(4)},

Any help is very appreciated!

Thank you

1 Like

It was a CSS issue… Never mind.

1 Like

I have the same issue. What part of the css fixed it for you?

If I remeber correctly you have to specify the width and height of the div element the slider is located in.
Let me know if it worked for you.

yeah it did… kinda annoying that you have to wrap most dcc elements in a Div.

1 Like

Can anyone provide a simple code snippet, how to achieve this in CSS?
I wasted already one hour without success…

Hi @shayan113,

so I am trying to have a plot element to the left and a slider element to the right,

                    dcc.Graph(id="plot_1", config={"displayModeBar": False})],
                    style = {"width": "98%", "display":"inline-block","position":"relative"}),
                                    id = "slider_1",
                                    updatemode = "drag",
                                    vertical = True,
                                    marks = {i: "{}".format(i) for i in [10, 20, 30, 40]},
                                    min = 10,
                                    max = 40,
                                    step = 10,
                                    value = 10)], style = {"height": "300px"}),
            style = {"width": "2%", "height":"100%","display":"inline-block","position":"relative"})

I ended up having to wrap the slider in its own html.Div and the height attribute as you can see had to be set in pixels rather than %.