update rangeslider and add a test for it

Author: almarklein

src/fragments/RangeSlider.react.js

@@ -10,22 +10,11 @@ import {propTypes, defaultProps} from '../components/RangeSlider.react';
 export default class RangeSlider extends Component {
     constructor(props) {
         super(props);
-        this.propsToState = this.propsToState.bind(this);
         this.DashSlider = props.tooltip
             ? createSliderWithTooltip(Range)
             : Range;
         this._computeStyle = computeSliderStyle();
-        this.state = {
-            value: props.value,
-            drag_value: props.value,
-        };
-        this.props.setProps({drag_value: props.value});
-    }
-
-    propsToState(newProps) {
-        if (newProps.value !== this.props.value) {
-            this.setState({value: newProps.value, drag_value: newProps.value});
-        }
+        this.state = {value: props.value};
     }
 
     UNSAFE_componentWillReceiveProps(newProps) {
@@ -34,11 +23,17 @@ export default class RangeSlider extends Component {
                 ? createSliderWithTooltip(Range)
                 : Range;
         }
-        this.propsToState(newProps);
+        if (newProps.value !== this.props.value) {
+            this.props.setProps({drag_value: newProps.value});
+            this.setState({value: newProps.value});
+        }
     }
 
     UNSAFE_componentWillMount() {
-        this.propsToState(this.props);
+        if (this.props.value !== null) {
+            this.props.setProps({drag_value: this.props.value});
+            this.setState({value: this.props.value});
+        }
     }
 
     render() {

tests/integration/sliders/test_sliders.py

@@ -188,11 +188,11 @@ def update_output(value):
         return "You have selected {}".format(value)
 
     dash_dcc.start_server(app)
+    slider = dash_dcc.find_element("#slider")
+
     dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 5")
-    # assert dash_dcc.find_element("#out-drag-value").text == "You have dragged 5"
-    # dash_dcc.wait_for_text_to_equal("#out-drag-value", "You have dragged 5")
+    dash_dcc.wait_for_text_to_equal("#out-drag-value", "You have dragged 5")
 
-    slider = dash_dcc.find_element("#slider")
     dash_dcc.click_and_hold_at_coord_fractions(slider, 0.25, 0.25)
     dash_dcc.move_to_coord_fractions(slider, 0.75, 0.25)
     dash_dcc.wait_for_text_to_equal("#out-drag-value", "You have dragged 15")
@@ -203,4 +203,39 @@ def update_output(value):
 
 
 def test_slsl007_drag_value_rangeslider(dash_dcc):
-    pass  # todo: xx
+    app = dash.Dash(__name__)
+    app.layout = html.Div(
+        [
+            dcc.RangeSlider(
+                id="slider",
+                min=0,
+                max=20,
+                step=1,
+                value=(5, 15),
+                tooltip={"always_visible": True},
+            ),
+            html.Div(id="out-value"),
+            html.Div(id="out-drag-value"),
+        ]
+    )
+
+    @app.callback(Output("out-drag-value", "children"), [Input("slider", "drag_value")])
+    def update_output(value):
+        value = value or (None, None)
+        return "You have dragged {}-{}".format(*value)
+
+    @app.callback(Output("out-value", "children"), [Input("slider", "value")])
+    def update_output(value):
+        return "You have selected {}-{}".format(*value)
+
+    dash_dcc.start_server(app)
+    slider = dash_dcc.find_element("#slider")
+
+    dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 5-15")
+    dash_dcc.wait_for_text_to_equal("#out-drag-value", "You have dragged 5-15")
+
+    dash_dcc.click_and_hold_at_coord_fractions(slider, 0.25, 0.25)
+    dash_dcc.move_to_coord_fractions(slider, 0.5, 0.25)
+    dash_dcc.wait_for_text_to_equal("#out-drag-value", "You have dragged 10-15")
+    dash_dcc.release()
+    dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 10-15")