Range Slider Labels Not Showing

Dash Python
1

Hi Dash Community,

I am having trouble labeling the marks on a range slider component.

The dict that I am feeding to the “marks” attribute is being formed correctly and I can’t tell what’s happening.

The simple example below should demonstrate what is wrong.

Thank you!

import dash
import dash_core_components as dcc
import dash_html_components as html
import datetime as dt
from dateutil.relativedelta import relativedelta

epoch = dt.datetime.utcfromtimestamp(0)

def unix_time_millis(dt):
return (dt - epoch).total_seconds() #* 1000.0

def get_marks_from_start_end(start, end):
result =
marks={}
current = start
while current <= end:
result.append(current)
current += relativedelta(days=1)
for i in result:
marks[unix_time_millis(i)] = {‘label’:i.strftime(‘%b %d, %Y - %H:%M:%S’)}
return marks

app = dash.Dash()
app.layout = html.Div(children=[
html.Div([
dcc.RangeSlider(
id = ‘datetime_RangeSlider’,
allowCross=False,
updatemode = ‘mouseup’, #don’t let it update till mouse released
min = unix_time_millis(dt.datetime(2017,10,17)),
max = unix_time_millis(dt.datetime(2017,10,19)),
value = [unix_time_millis(dt.datetime(2017,10,17)),
unix_time_millis(dt.datetime(2017,10,19))],
marks=get_marks_from_start_end(dt.datetime(2017,10,17),
dt.datetime(2017,10,19))
)
]
)
]
)

if name == ‘main’:
app.run_server(debug=False)

2 Likes
2

I ran into a similar issue. Not sure why, but for some reason the last label on the 2nd slider won’t show. It doesn’t like the decimal value (201817.0). It isn’t clear to me how this is different than the 7.65 label in the first slider.

33

html.Div(dcc.RangeSlider(
    min=0,
    max=10,
    step=None,
    marks={
        0: '0 °F',
        3: '3 °F',
        5: '5 °F',
        7.65: '7.65 °F',
        10: '10 °F'
    },
    value=[0,5]

    )),

html.Div(dcc.RangeSlider(
    min=201813,
    max=201817,
    step=None,
    marks={'201813': '201813',
            201814: '201814',
            201815: '201815',
            201816: '201816.0',
            201817.0: '201817.0'},
    value=[201813,201817]
    ))
1 Like
3

Yeah, it’s a bug whereby the dictionary keys must be integers for the labels to show up. Just cast the keys to int() to remove the decimal, and the labels will appear.

2 Likes
4

I still observe the same behavior using dash 2.51 and plotly 5.10.0