Adjust height on vertical range slider

Hi, I like to adjust the height of a vertical range slider, but it doesn’t seem to work. I have wrapped the slider inside a Div, and tried to increase/decrease the height of the Div, but it doesn’t seem to affect the slider. I have tried to set the height in % and also in px, but neither works. Any help would be appreciated!

                        html.Div([
                            dcc.RangeSlider(
                                id='num',
                                min=num_min,
                                max=num_max,
                                value=[num_min, num_max],
                                allowCross=False,
                                marks={
                                    str(i): {'label': str(i)} for i in
                                    range(num_min, num_min+ num_max, 10)
                                },
                                vertical=True,
                                pushable=1
                            )], style={'backgroundColor': 'red', 'height': '300px'}
                        )

As you can see in the screenshot, the Div’s height is set to 300px, but the range slider doesn’t appear to be responsive to fit the Div.
Untitled

@Peilin ,
The RangeSlider component has a “verticalHeight” attribute that you can use to set the height you want. For example, this would set the height of the slider to 200 pixels.

dcc.RangeSlider(
                                id='num',
                                min=10,
                                max=50,
                                value=[10, 50],
                                allowCross=False,
                                marks={
                                    str(i): {'label': str(i)} for i in
                                    range(10, 10+ 50, 10)
                                },
                                vertical=True,
                                pushable=1,
                                verticalHeight=200
                            )

Hope that helps.
Kaz.

1 Like