RangeSlider final element is not aligned with the rest

Still quite new to css and layout so please forgive me for this trivial question. I have created a rangeslider with the following code (the slider value is temporary):

date_list2 = {0:{'label': "2-2", 'style':{'font-size':'10px'}},
 1:{'label': "2-2", 'style':{'font-size':'10px'}},
 14:{'label': "2-2", 'style':{'font-size':'10px', 'margin-right':'10px'}}}

The layout section:

            value=[0, 14],
            step = None,
            marks = date_list2,
            ),style={'width': '60%', 'display': 'inline-block', 'height': '50px'},)

The final element is out of line for some reason even it clearly has enough space to fit it.


I have tried changing value, changing the font-size and the margin for the mark style but it does not fix the behavior. I understand the string probably hits the border of the component that is why it is wrapping to another line

Edit: I sort of got it working with


for the last marker. Is this the right approach?

Exactly same problem here!

Actually this is also visible on some of the examples in the documentation: dcc.RangeSlider | Dash for Python Documentation | Plotly

Indent work fine, but a better option would be to use padding/margin. Dear Plotly, any ideas how to do that?

Hi @tonywang531 and @Hikari,

I’ve encountered the same issue with yours. However, check out this post by @adab here which fixed my issue permanently.