Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

dcc.Slider() Right-Most Label/Mark is Missing

I’m very aware that I made a similar post here: RangeSlider Label Gets Cut Off

But, this is different in the sense that before, the Label was split between 2 lines. Now, I don’t even see the last label.

        dcc.Slider(id='bin-selector', min=0.90, max=1.0, value=1.0, step=None, #overwrite default step=1
                                       marks={0.90:{'label':'Bin:0.90'}, 0.95:{'label':'Bin:0.95'}, 
                                              0.98:{'label':'Bin:0.98'}, 0.99:{'label':'Bin:0.99'}, 
    ], style={'width':'600px', 'text-align':'center', 'margin':'auto', 'padding':'30px'}),
    html.Div(id='slider-output-container', style={'width':'500px', 'text-align':'center', 
                                                  'margin':'auto', 'padding':'30px'}),

with a callback:

    Output('slider-output-container', 'children'),
    [Input('bin-selector', 'value')]
def update_output_under_slider(value):
    return 'Retrieving stats for bins within the interval of {}'.format(value)

In fact, this is very similar to the code in the documentation dcc.Slider | Dash for Python Documentation | Plotly

Here is a screenshot;


So my question is, what could have happened to the last label (indicated by the red arrow)? It should say Bin:1.0
I tried playing with margin and padding but so far no dice.

Same thing happened to me. I don’t know how to fix, but I have a feeling it has to do with the value 1.0. Here is a screenshot of my slider.

Hi @nbroad and welcome to the Dash Community!

Yes - this is a known issue:

The problem is displaying markers if the key has a .0 ( like 1.0, 0.0 etc)

You can see this using an example from the docs

        0: '0 °F',
        3: '3 °F',
        5: '5 °F',
        7.65: '7.65 °F',
        10: '10 °F'

You can make the 3 disappear by doing this: 3.0: '3 °F',
if you use 3.01: '3 °F', or the integer like in the example, the 3 will show up.

One workaround is to use an integer for the key in the slider marks, then convert to float if needed in the callback