Vertical Slider has stopped working

Hello, Vertical Sliders have stopped working (I think this happened in the most recent update, but am not certain) However, vertical RangeSlider’s still work in vertical mode. Thanks, Peter

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)


app.layout = html.Div(children=[
    html.H1(children='Vertical Slider has stopped working.'),
    html.Div([
        dcc.Slider(
            id='mhd_window_slider',
            min=0.05,
            max=1.4,
            step=0.005,
            value=0.5,
            vertical=True,
        )
    ], style={ 'width':'50px', 'height':'500px' }),
    
    html.H1(children='Vertical RangeSlider still works.'),
    html.Div([
        dcc.RangeSlider(
            id='mhd_clim_slider',
            count=1,
            min=0,
            max=3,
            step=0.01,
            value=[0.02, 1],
            vertical=True,
        )
    ], style={ 'width':'50px', 'height':'500px' }),
])

if __name__ == '__main__':
    app.run_server(debug=True)

[alexcjohnson]

@heartsmith I believe you want a boolean vertical=True, not a string vertical='True'

[Marc-Andre-Rivet]

This regression was introduced with the loading components work. The additional wrapper div is causing the issue: https://github.com/plotly/dash-core-components/blame/master/src/components/Slider.react.js#L24

The additional div is not present for the Range Slider https://github.com/plotly/dash-core-components/blob/master/src/components/RangeSlider.react.js#L25 hence the difference in behavior.

The wrapper is required to the loading component functionality to work as the data-* props to get passed down the the actual Slider – which is not a problem for the underlying RangeSlider.

Expected resolution is:

• vertical slider works as expected
• loading state works correctly with slider
• minimally add a visual test for vertical slider

As a temporary fix, the wrapper can have display: initial; applied to it and it.

The probable fix on our side is also probably to apply style={{display: 'initial'}} unto the wrapper div.