Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Slider Order Reversible?

Is it possible to reverse the order of a vertical slider so that the smallest value is at the top and the largest value at the bottom? Attached is the default output with the smallest number at the bottom of the slider.

Vertical Slider

Hi @Bw984

Something like this might work:

   html.Div(
        dcc.Slider(
            min=0,
            max=10,
            marks={i:{'label' :str(i), 'style':{'transform': 'rotate(180deg)'}} for i in range(11)},
            vertical=True
        ), style={'transform': 'rotate(180deg)'}
    )

That almost works with the dcc.RangeSlider. It looks exactly as it should but when you mouse over and grab the top slider it actually moves bottom slider and when you grab the bottom slider it moves the top slider.

image

Haha - maybe you could get the user to turn the screen 180deg :upside_down_face: