dcc.RangeSlider vertical marker text gets squished

Dash Python
1

I’m trying to make a dcc.RangeSlider with vertical text markers because I have a large number of slider increments. I’ve followed recommendations here, and been successful in getting slider marks aligned vertically. However, I cannot seem to add more space for the marks, and they keep getting squished, see Fig. 1.

Screenshot 2021-10-24 at 13.31.38
Screenshot 2021-10-24 at 13.31.38914×338 12.1 KB

Fig. 1: Screenshot of squished, text-wrapped slider markers

Here’s a MRE which creates the slider above:

import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from datetime import datetime,timedelta

app = dash.Dash(name=__name__,
                external_stylesheets=[
                    dbc.themes.SLATE,
                    ],
                )
num_time = [x for x in range(6)]

#create marks with stile
style={"writing-mode": "vertical-rl"}
marks = {x:{"label":(datetime.now()+timedelta(days=x)).strftime("%d-%m %I %p"),"style":style} for x in num_time}
    
controls= dbc.Card(
    [
        dbc.FormGroup(
            [
            dbc.Col(
            dbc.FormGroup(
                [
                dbc.Label("Select a date range for daily totals"),
                dcc.RangeSlider(
                    id="ts_selector",
                    min=num_time[0], #the first date
                    max=num_time[-1], #the last date
                    value=[num_time[0],num_time[-1]], #default: the first
                    marks = marks,
                    allowCross=False
                    )
                ],
                ),
            md=6,
            ),
        ],
         row=True,   
        )
    ],
    body=True,
)



app.layout = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(controls, md=6,style = {'height':'100vh'}),
            ],
            align="top",
            className="h-100"
            ),
        ],
    fluid=True,
    style={"height": "100vh"},
)

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

I’ve tried all kinds of permutations of adding margins to columns, adding padding around elements, but cannot seem to solve the issue. My desired output would be to have the date text markers vertically aligned with no text wrapping. Any help appreciated!

P.S. I’m working with dash==1.18.1.

2

Put ‘white-space’:‘nowrap’ also inside the style dict