Vertical Slider

[Barakuda]

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:

dcc.Slider(
    id='slider-updatemode',
    marks={i: '{}'.format(10 ** i) for i in range(4)},
    max=3,
    value=2,
    step=0.01,
    updatemode='drag',
    vertical='True'
)

Any help is very appreciated!

Thank you

[Barakuda]

It was a CSS issue… Never mind.

[klnrdknt]

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

[Barakuda]

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.

[klnrdknt]

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

[shayan113]

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

[drosophilaris]

Hi @shayan113,

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

            html.Div([
                html.Div([
                    dcc.Graph(id="plot_1", config={"displayModeBar": False})],
                    style = {"width": "98%", "display":"inline-block","position":"relative"}),
                html.Div([
                        html.Div([
                            dcc.Slider(
                                    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 %.