Dash RangeSlider automatically rounds marks

Question

I am using the RangeSlider in Python Dash. This slider is supposed to allow users to select a range of dates to display, somewhere between the minimum and maximum years in the dataset. The issue that I am having is that each mark shows as 2k due to it being automatically rounded. The years range between 1784 and 2020, with a step of 10 each time. How do I get the marks to show as the actual dates and not just 2k? This is what I have below.

dcc.RangeSlider(sun['Year'].min(), sun['Year'].max(), 10,
                value=[sun['Year'].min(), sun['Year'].max()], id='years')

Answer 1

You can use attribute marks to style the ticks of the sliders as follows:

marks={i: '{}'.format(i) for i in range(1784,2021,10)}

The full code:

from dash import Dash, dcc, html


app = Dash(__name__)

app.layout = html.Div([
    dcc.RangeSlider(1784, 2020,
        id='non-linear-range-slider',
        marks={i: '{}'.format(i) for i in range(1784,2021,10)},
        value=list(range(1784,2021,10)),
        dots=False,
        step=10,
        updatemode='drag'
    ),
    html.Div(id='output-container-range-slider-non-linear', style={'margin-top': 20})
])

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

Output