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

Dash Python
1

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.

html.Div(children=[
        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'}, 
                                              1.0:{'label':'Bin:1.0'}})
    ], 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:

@app.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;

image

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.

3

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.

Screen Shot 2020-07-12 at 9.46.42 AM
Screen Shot 2020-07-12 at 9.46.42 AM1386×132 12.4 KB

4

Hi @nbroad and welcome to the Dash Community!

Yes - this is a known issue: https://github.com/plotly/dash-core-components/issues/159

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

dcc.Slider(
    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=5
)

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