Slider tooltip not updating in certain scenarios

[chriddyp]

as reported in https://community.plot.ly/t/tooltip-and-slider-not-refreshing-the-position/35556

[xhluca]

I created the following minimally-reproduceable example:

import dash
import dash_html_components as html
import dash_core_components as dcc

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(style={'margin': '20px'}, children=[
    dcc.Slider(
        id='my-slider',
        min=0,
        max=20,
        step=0.5,
        value=10,
        tooltip=dict(always_visible=True)
    ),
    html.Div(id='slider-output-container')
])


@app.callback(
    dash.dependencies.Output('slider-output-container', 'children'),
    [dash.dependencies.Input('my-slider', 'value')])
def update_output(value):
    return 'You have selected "{}"'.format(value)


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

Here's an example of what it looks like:

[jjaraalm]

Same issue here, comes from upstream.

Appears fixed in the antd package but not backported to rc-slider. See: react-component/slider#623

Simple fix might be to change dependencies from rc-slider (and other rc- components) to antd.

[emmanuelle]

Also mentioned in https://community.plotly.com/t/sliders-hover-does-not-move-on-values-between-10-and-10/36886

[almarklein]

I ran into this too, yesterday. But after updating dash-core-components, it worked as expected. I just verified that with the example code above, the tooltip moves along correctly. So I suspect that this issue can be closed.

[kdburke]

I had a similar issue with tooltips rendering in the wrong part of the page as the app loaded. Updating my dash packages including dash-core-components resolved this issue.