RangeSlider overcrowded marks values

Dash Python
1

I am implementing RangeSlider and the values is huge list of years. I am able to input the values but the same when I display through marks it overlaps (see below image).
This is the code I am using.

year_list = sorted(car_accidents.Year.tolist())
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
          html.Label('Select Years'),
#           dcc.RangeSlider(id='year-range-slider', min=1, max=10,step=1, value=[1,5], marks={i: i for i in range(10)})
#         dcc.RangeSlider(id='year-range-slider',     value=df_wimbledons.Year, )
        dcc.RangeSlider(
        id='year-slider',
        min = min(year_list),
        max = max(year_list),
        value=[1917, 2017],
        marks={i: {'labels':i,'style':{'writing-mode':'vertical-rl', 'text-orientation':'mixed'}} for i in year_list},
        step=5
    )

]
)

For the above code it does not display marks at all.

Where as when I replace the marks value with just marks={i: i for i in year_list}, below sort of overlapping happens

image
image1659×347 42.6 KB

2

Hi @manutd46

One thing to check: The labels must be of type string.

Or you can start with this and then modify it for your data:

        dcc.RangeSlider(
            id="year",
            min=1917,
            max=2020,
            marks={
                year: {"label": str(year), "style": {"writing-mode": "vertical-rl"}}
                for year in range(1915,2021, 5)
            },
            value= [2010, 2020],
        ),