Rangeslider vertical marks condensed into one point using sideways and vertical writing mode

[phate]

If the rangeslider is horizontally, it becomes like this:

So I tried to rotate it using the following code and style:

        html.Div([
            dcc.RangeSlider(df['total_second'].min(),
                            df['total_second'].max(),
                            20,
                            value=[df['total_second'].min(),
                                   df['total_second'].max()],
                            marks=dict(zip(df['total_second'], df['time'])),
                            id='time_range')
        ],
            style={'writing-mode': 'vertical-lr',
                   'text-orientation': 'sideways'
                   })

But this results in the following:

(Also the bottom part is cut out using the style)

I tried using this solution but to no avail.

Any suggestions are appreciated, thanks in advance

[akroma]

Hey @phate ,

Keep range slider horizontal but rotate marks 90deg.

Here’s an example:

from dash import Dash, html, dcc, Input, Output

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    
    dcc.RangeSlider(0, 20, 1, value=[5, 15],
                    
                    id='my-range-slider',

                    marks={
                        str(h): {'label': str(h), 'style': {"transform": "rotate(90deg)"}}
                        for h in range(0, 20)
                        }
                    ),
    
    html.Div(id='output-container-range-slider')
])

@app.callback(
    Output('output-container-range-slider', 'children'),
    [Input('my-range-slider', 'value')])

def update_output(value):
    return 'You have selected "{}"'.format(value)

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

Have a nice day.