Vertical Slider has stopped working

[pfbuxton]

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)

[Marc-Andre-Rivet]

@pfbuxton Investigating

[happyshows]

Same here.

[happyshows]

I think adding "min-height" to the css class of .rc-slider-vertical will fix it, but obviously it's not the long term solution.

[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.

[heartsmith]

Hi, I tried using the style={{display: 'initial'}} on my code like below:

html.Div(
	dcc.Slider(
		id='slider-terminal5r',
		min=0,
		max=3,
		value=3,
		step=1,
		marks={
			0: {'label': 'OFF', 'style': {'color': '#f50'}},
			1: {'label': 'Bot.'},
			2: {'label': 'Mid.'},
			3: {'label': 'Top', 'style': {'color': '#77b0b1'}}
		},
		updatemode='drag',
		vertical='True'
	),className = 'one column', style={'height': '200px', 'display': 'initial'}
),

However, the result is still the same. Did I use it wrong? I need to demonstrate my interface next week, but I just realized that I had this problem after updating my library.
Any thought? Thank you.

[alexcjohnson]

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

[heartsmith]

@alexcjohnson Hi Alex. Thank you for your help. :) I tried using your fix, but the result is still the same like below.