Adding drag_value to Slider

src/components/RangeSlider.react.js

@@ -49,6 +49,11 @@ RangeSlider.propTypes = {
      */
     value: PropTypes.arrayOf(PropTypes.number),
 
+    /**
+     * The value of the input during a drag
+     */
+    drag_value: PropTypes.arrayOf(PropTypes.number),
+
     /**
      * allowCross could be set as true to allow those handles to cross.
      */
@@ -145,18 +150,18 @@ RangeSlider.propTypes = {
     verticalHeight: PropTypes.number,
 
     /**
-     * Determines when the component should update
-     * its value. If `mouseup`, then the slider
-     * will only trigger its value when the user has
-     * finished dragging the slider. If `drag`, then
-     * the slider will update its value continuously
-     * as it is being dragged.
-     * Only use `drag` if your updates are fast.
+     * Determines when the component should update its `value`
+     * property. If `mouseup` (the default) then the slider
+     * will only trigger its value when the user has finished
+     * dragging the slider. If `drag`, then the slider will
+     * update its value continuously as it is being dragged.
+     * Note that for the latter case, the `drag_value`
+     * property could be used instead.
      */
     updatemode: PropTypes.oneOf(['mouseup', 'drag']),
 
     /**
-     * Dash-assigned callback that gets fired when the value changes.
+     * Dash-assigned callback that gets fired when the value or drag_value changes.
      */
     setProps: PropTypes.func,
 

src/components/Slider.react.js

@@ -48,6 +48,11 @@ Slider.propTypes = {
      */
     value: PropTypes.number,
 
+    /**
+     * The value of the input during a drag
+     */
+    drag_value: PropTypes.number,
+
     /**
      * Additional CSS class for the root DOM node
      */
@@ -125,18 +130,18 @@ Slider.propTypes = {
     verticalHeight: PropTypes.number,
 
     /**
-     * Determines when the component should update
-     * its value. If `mouseup`, then the slider
-     * will only trigger its value when the user has
-     * finished dragging the slider. If `drag`, then
-     * the slider will update its value continuously
-     * as it is being dragged.
-     * Only use `drag` if your updates are fast.
+     * Determines when the component should update its `value`
+     * property. If `mouseup` (the default) then the slider
+     * will only trigger its value when the user has finished
+     * dragging the slider. If `drag`, then the slider will
+     * update its value continuously as it is being dragged.
+     * Note that for the latter case, the `drag_value`
+     * property could be used instead.
      */
     updatemode: PropTypes.oneOf(['mouseup', 'drag']),
 
     /**
-     * Dash-assigned callback that gets fired when the value changes.
+     * Dash-assigned callback that gets fired when the value or drag_value changes.
      */
     setProps: PropTypes.func,
 

src/fragments/RangeSlider.react.js

@@ -17,12 +17,14 @@ export default class RangeSlider extends Component {
         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});
+            this.setState({value: newProps.value, drag_value: newProps.value});
         }
     }
 
@@ -84,9 +86,10 @@ export default class RangeSlider extends Component {
                 <this.DashSlider
                     onChange={value => {
                         if (updatemode === 'drag') {
-                            setProps({value});
+                            setProps({value: value, drag_value: value});
                         } else {
-                            this.setState({value});
+                            this.setState({value: value});
+                            setProps({drag_value: value});
                         }
                     }}
                     onAfterChange={value => {
@@ -101,6 +104,7 @@ export default class RangeSlider extends Component {
                         [
                             'className',
                             'value',
+                            'drag_value',
                             'setProps',
                             'marks',
                             'updatemode',

src/fragments/Slider.react.js

@@ -20,12 +20,14 @@ export default class Slider extends Component {
         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});
+            this.setState({value: newProps.value, drag_value: newProps.value});
         }
     }
 
@@ -87,9 +89,10 @@ export default class Slider extends Component {
                 <this.DashSlider
                     onChange={value => {
                         if (updatemode === 'drag') {
-                            setProps({value});
+                            setProps({value: value, drag_value: value});
                         } else {
-                            this.setState({value});
+                            this.setState({value: value});
+                            setProps({drag_value: value});
                         }
                     }}
                     onAfterChange={value => {
@@ -114,6 +117,7 @@ export default class Slider extends Component {
                             'setProps',
                             'updatemode',
                             'value',
+                            'drag_value',
                             'marks',
                             'verticalHeight',
                         ],