fixes tooltips on RangeSlider

CHANGELOG.md

@@ -4,6 +4,15 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 
 ## UNRELEASED
+
+### Fixed
+
+- [#963](https://github.com/plotly/dash-core-components/pull/963) Fixes [#885](https://github.com/plotly/dash-core-components/issues/885)
+
+  This applies the fix from [#878](https://github.com/plotly/dash-core-components/pull/878) to the RangeSlider. 
+  It not only fixes the bug where the tooltips were visible when slider was not, but it also reduces the lag in the 
+  tooltip when the slider handles are moved.
+
 ### Added
 - [#932](https://github.com/plotly/dash-core-components/pull/932). Adds a new copy to clipboard component.
 - [#948](https://github.com/plotly/dash-core-components/pull/948)] Adds `disabled_days` prop to `DatePickerRange` and `DatePickerSingle` components. With this prop you can specify days that should be made unselectable in the date picker, in addition to those that fall outside of the range specified by `min_date_allowed` and `max_date_allowed`.

NAMESPACE

@@ -24,3 +24,5 @@ export(dccTab)
 export(dccTabs)
 export(dccTextarea)
 export(dccUpload)
+export(dccTimer)
+export(dccGeolocation)

src/fragments/RangeSlider.react.js

@@ -92,7 +92,15 @@ export default class RangeSlider extends Component {
                             setProps({value});
                         }
                     }}
-                    tipProps={tipProps}
+                    /*
+                    if/when rc-slider or rc-tooltip are updated to latest versions,
+                    we will need to revisit this code as the getTooltipContainer function will need to be a prop instead of a nested property
+                    */
+                    tipProps={{
+                        ...tipProps,
+                        getTooltipContainer: node => node,
+                    }}
+                    style={{position: 'relative'}}
                     value={value}
                     marks={truncatedMarks}
                     {...omit(

tests/integration/sliders/test_sliders.py

@@ -162,6 +162,71 @@ def test_slsl005_slider_tooltip(dash_dcc):
     )
 
 
+def test_slsl005_rangeslider_tooltip(dash_dcc):
+    app = dash.Dash(__name__)
+    app.layout = html.Div(
+        [
+            html.Div(
+                [
+                    html.Div(
+                        dcc.RangeSlider(
+                            min=0,
+                            max=100,
+                            value=[0, 65],
+                            tooltip={"always_visible": True, "placement": "top"},
+                        ),
+                        style=dict(height=100),
+                    ),
+                    html.Div(
+                        dcc.RangeSlider(
+                            min=0,
+                            max=100,
+                            value=[0, 65],
+                            tooltip={"always_visible": True, "placement": "top"},
+                        ),
+                        style=dict(height=100),
+                    ),
+                    html.Div(
+                        dcc.RangeSlider(
+                            min=0,
+                            max=100,
+                            value=[0, 65],
+                            tooltip={"always_visible": True, "placement": "top"},
+                        ),
+                        style=dict(height=100),
+                    ),
+                    html.Div(
+                        dcc.RangeSlider(
+                            min=0,
+                            max=100,
+                            value=[0, 65],
+                            tooltip={"always_visible": True, "placement": "top"},
+                        ),
+                        style=dict(height=100),
+                    ),
+                    html.Div(
+                        dcc.RangeSlider(
+                            id="test-slider",
+                            min=0,
+                            max=100,
+                            value=[0, 65],
+                            tooltip={"always_visible": True, "placement": "top"},
+                        ),
+                        style=dict(height=100),
+                    ),
+                ],
+                style=dict(maxHeight=300, overflowX="scroll"),
+            )
+        ]
+    )
+
+    dash_dcc.start_server(app)
+    dash_dcc.wait_for_element("#test-slider")
+    dash_dcc.percy_snapshot(
+        "slider-make sure tooltips are only visible if parent slider is visible"
+    )
+
+
 def test_slsl006_drag_value_slider(dash_dcc):
     app = dash.Dash(__name__)
     app.layout = html.Div(