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,19 @@ 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.
+ * If you want different actions during and after drag,
+ * leave `updatemode` as `mouseup` and use `drag_value`
+ * for the continuously updating value.
  */
  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

@@ -10,20 +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,
- };
- }
-
- propsToState(newProps) {
- if (newProps.value !== this.props.value) {
- this.setState({value: newProps.value});
- }
+ this.state = {value: props.value};
  }
 
  UNSAFE_componentWillReceiveProps(newProps) {
@@ -32,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() {
@@ -84,9 +81,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 +99,7 @@ export default class RangeSlider extends Component {
  [
  'className',
  'value',
+ 'drag_value',
  'setProps',
  'marks',
  'updatemode',

src/fragments/Slider.react.js

@@ -13,20 +13,11 @@ import {propTypes, defaultProps} from '../components/Slider.react';
 export default class Slider extends Component {
  constructor(props) {
  super(props);
- this.propsToState = this.propsToState.bind(this);
  this.DashSlider = props.tooltip
  ? createSliderWithTooltip(ReactSlider)
  : ReactSlider;
  this._computeStyle = computeSliderStyle();
- this.state = {
- value: props.value,
- };
- }
-
- propsToState(newProps) {
- if (newProps.value !== this.props.value) {
- this.setState({value: newProps.value});
- }
+ this.state = {value: props.value};
  }
 
  UNSAFE_componentWillReceiveProps(newProps) {
@@ -35,11 +26,17 @@ export default class Slider extends Component {
  ? createSliderWithTooltip(ReactSlider)
  : ReactSlider;
  }
- 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() {
@@ -87,9 +84,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 +112,7 @@ export default class Slider extends Component {
  'setProps',
  'updatemode',
  'value',
+ 'drag_value',
  'marks',
  'verticalHeight',
  ],

tests/dash_core_components_page.py

@@ -2,6 +2,7 @@
 from selenium.webdriver.support.ui import WebDriverWait
 from selenium.webdriver.common.by import By
 from selenium.webdriver.support import expected_conditions as EC
+from selenium.webdriver.common.action_chains import ActionChains
 
 logger = logging.getLogger(__name__)
 
@@ -100,3 +101,20 @@ def _wait_until_day_is_clickable(self, timeout=1):
  @property
  def date_picker_day_locator(self):
  return 'div[data-visible="true"] td.CalendarDay'
+
+ def click_and_hold_at_coord_fractions(self, elem_or_selector, fx, fy):
+ elem = self._get_element(elem_or_selector)
+
+ ActionChains(self.driver).move_to_element_with_offset(
+ elem, elem.size["width"] * fx, elem.size["height"] * fy
+ ).click_and_hold().perform()
+
+ def move_to_coord_fractions(self, elem_or_selector, fx, fy):
+ elem = self._get_element(elem_or_selector)
+
+ ActionChains(self.driver).move_to_element_with_offset(
+ elem, elem.size["width"] * fx, elem.size["height"] * fy
+ ).perform()
+
+ def release(self):
+ ActionChains(self.driver).release().perform()

tests/integration/sliders/test_sliders.py

@@ -160,3 +160,84 @@ def test_slsl005_slider_tooltip(dash_dcc):
  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(
+ [
+ dcc.Slider(
+ id="slider",
+ min=0,
+ max=20,
+ step=1,
+ value=5,
+ 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):
+ 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")
+ dash_dcc.wait_for_text_to_equal("#out-drag-value", "You have dragged 5")
+
+ 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")
+ 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")
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 5")
+ dash_dcc.release()
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 10")
+
+
+def test_slsl007_drag_value_rangeslider(dash_dcc):
+ 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.wait_for_text_to_equal("#out-value", "You have selected 5-15")
+ dash_dcc.release()
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 10-15")

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,19 @@ 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.
+ * If you want different actions during and after drag,
+ * leave `updatemode` as `mouseup` and use `drag_value`
+ * for the continuously updating value.
  */
  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

@@ -10,20 +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,
- };
- }
-
- propsToState(newProps) {
- if (newProps.value !== this.props.value) {
- this.setState({value: newProps.value});
- }
+ this.state = {value: props.value};
  }
 
  UNSAFE_componentWillReceiveProps(newProps) {
@@ -32,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() {
@@ -84,9 +81,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 +99,7 @@ export default class RangeSlider extends Component {
  [
  'className',
  'value',
+ 'drag_value',
  'setProps',
  'marks',
  'updatemode',

src/fragments/Slider.react.js

@@ -13,20 +13,11 @@ import {propTypes, defaultProps} from '../components/Slider.react';
 export default class Slider extends Component {
  constructor(props) {
  super(props);
- this.propsToState = this.propsToState.bind(this);
  this.DashSlider = props.tooltip
  ? createSliderWithTooltip(ReactSlider)
  : ReactSlider;
  this._computeStyle = computeSliderStyle();
- this.state = {
- value: props.value,
- };
- }
-
- propsToState(newProps) {
- if (newProps.value !== this.props.value) {
- this.setState({value: newProps.value});
- }
+ this.state = {value: props.value};
  }
 
  UNSAFE_componentWillReceiveProps(newProps) {
@@ -35,11 +26,17 @@ export default class Slider extends Component {
  ? createSliderWithTooltip(ReactSlider)
  : ReactSlider;
  }
- 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() {
@@ -87,9 +84,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 +112,7 @@ export default class Slider extends Component {
  'setProps',
  'updatemode',
  'value',
+ 'drag_value',
  'marks',
  'verticalHeight',
  ],

tests/dash_core_components_page.py

@@ -2,6 +2,7 @@
 from selenium.webdriver.support.ui import WebDriverWait
 from selenium.webdriver.common.by import By
 from selenium.webdriver.support import expected_conditions as EC
+from selenium.webdriver.common.action_chains import ActionChains
 
 logger = logging.getLogger(__name__)
 
@@ -100,3 +101,20 @@ def _wait_until_day_is_clickable(self, timeout=1):
  @property
  def date_picker_day_locator(self):
  return 'div[data-visible="true"] td.CalendarDay'
+
+ def click_and_hold_at_coord_fractions(self, elem_or_selector, fx, fy):
+ elem = self._get_element(elem_or_selector)
+
+ ActionChains(self.driver).move_to_element_with_offset(
+ elem, elem.size["width"] * fx, elem.size["height"] * fy
+ ).click_and_hold().perform()
+
+ def move_to_coord_fractions(self, elem_or_selector, fx, fy):
+ elem = self._get_element(elem_or_selector)
+
+ ActionChains(self.driver).move_to_element_with_offset(
+ elem, elem.size["width"] * fx, elem.size["height"] * fy
+ ).perform()
+
+ def release(self):
+ ActionChains(self.driver).release().perform()

tests/integration/sliders/test_sliders.py

@@ -160,3 +160,84 @@ def test_slsl005_slider_tooltip(dash_dcc):
  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(
+ [
+ dcc.Slider(
+ id="slider",
+ min=0,
+ max=20,
+ step=1,
+ value=5,
+ 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):
+ 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")
+ dash_dcc.wait_for_text_to_equal("#out-drag-value", "You have dragged 5")
+
+ 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")
+ 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")
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 5")
+ dash_dcc.release()
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 10")
+
+
+def test_slsl007_drag_value_rangeslider(dash_dcc):
+ 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.wait_for_text_to_equal("#out-value", "You have selected 5-15")
+ dash_dcc.release()
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 10-15")

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,19 @@ 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.
+ * If you want different actions during and after drag,
+ * leave `updatemode` as `mouseup` and use `drag_value`
+ * for the continuously updating value.
  */
  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

@@ -10,20 +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,
- };
- }
-
- propsToState(newProps) {
- if (newProps.value !== this.props.value) {
- this.setState({value: newProps.value});
- }
+ this.state = {value: props.value};
  }
 
  UNSAFE_componentWillReceiveProps(newProps) {
@@ -32,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() {
@@ -84,9 +81,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 +99,7 @@ export default class RangeSlider extends Component {
  [
  'className',
  'value',
+ 'drag_value',
  'setProps',
  'marks',
  'updatemode',

src/fragments/Slider.react.js

@@ -13,20 +13,11 @@ import {propTypes, defaultProps} from '../components/Slider.react';
 export default class Slider extends Component {
  constructor(props) {
  super(props);
- this.propsToState = this.propsToState.bind(this);
  this.DashSlider = props.tooltip
  ? createSliderWithTooltip(ReactSlider)
  : ReactSlider;
  this._computeStyle = computeSliderStyle();
- this.state = {
- value: props.value,
- };
- }
-
- propsToState(newProps) {
- if (newProps.value !== this.props.value) {
- this.setState({value: newProps.value});
- }
+ this.state = {value: props.value};
  }
 
  UNSAFE_componentWillReceiveProps(newProps) {
@@ -35,11 +26,17 @@ export default class Slider extends Component {
  ? createSliderWithTooltip(ReactSlider)
  : ReactSlider;
  }
- 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() {
@@ -87,9 +84,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 +112,7 @@ export default class Slider extends Component {
  'setProps',
  'updatemode',
  'value',
+ 'drag_value',
  'marks',
  'verticalHeight',
  ],

tests/dash_core_components_page.py

@@ -2,6 +2,7 @@
 from selenium.webdriver.support.ui import WebDriverWait
 from selenium.webdriver.common.by import By
 from selenium.webdriver.support import expected_conditions as EC
+from selenium.webdriver.common.action_chains import ActionChains
 
 logger = logging.getLogger(__name__)
 
@@ -100,3 +101,20 @@ def _wait_until_day_is_clickable(self, timeout=1):
  @property
  def date_picker_day_locator(self):
  return 'div[data-visible="true"] td.CalendarDay'
+
+ def click_and_hold_at_coord_fractions(self, elem_or_selector, fx, fy):
+ elem = self._get_element(elem_or_selector)
+
+ ActionChains(self.driver).move_to_element_with_offset(
+ elem, elem.size["width"] * fx, elem.size["height"] * fy
+ ).click_and_hold().perform()
+
+ def move_to_coord_fractions(self, elem_or_selector, fx, fy):
+ elem = self._get_element(elem_or_selector)
+
+ ActionChains(self.driver).move_to_element_with_offset(
+ elem, elem.size["width"] * fx, elem.size["height"] * fy
+ ).perform()
+
+ def release(self):
+ ActionChains(self.driver).release().perform()

tests/integration/sliders/test_sliders.py

@@ -160,3 +160,84 @@ def test_slsl005_slider_tooltip(dash_dcc):
  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(
+ [
+ dcc.Slider(
+ id="slider",
+ min=0,
+ max=20,
+ step=1,
+ value=5,
+ 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):
+ 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")
+ dash_dcc.wait_for_text_to_equal("#out-drag-value", "You have dragged 5")
+
+ 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")
+ 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")
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 5")
+ dash_dcc.release()
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 10")
+
+
+def test_slsl007_drag_value_rangeslider(dash_dcc):
+ 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.wait_for_text_to_equal("#out-value", "You have selected 5-15")
+ dash_dcc.release()
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 10-15")

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,19 @@ 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.
+ * If you want different actions during and after drag,
+ * leave `updatemode` as `mouseup` and use `drag_value`
+ * for the continuously updating value.
  */
  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

@@ -10,20 +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,
- };
- }
-
- propsToState(newProps) {
- if (newProps.value !== this.props.value) {
- this.setState({value: newProps.value});
- }
+ this.state = {value: props.value};
  }
 
  UNSAFE_componentWillReceiveProps(newProps) {
@@ -32,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() {
@@ -84,9 +81,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 +99,7 @@ export default class RangeSlider extends Component {
  [
  'className',
  'value',
+ 'drag_value',
  'setProps',
  'marks',
  'updatemode',

src/fragments/Slider.react.js

@@ -13,20 +13,11 @@ import {propTypes, defaultProps} from '../components/Slider.react';
 export default class Slider extends Component {
  constructor(props) {
  super(props);
- this.propsToState = this.propsToState.bind(this);
  this.DashSlider = props.tooltip
  ? createSliderWithTooltip(ReactSlider)
  : ReactSlider;
  this._computeStyle = computeSliderStyle();
- this.state = {
- value: props.value,
- };
- }
-
- propsToState(newProps) {
- if (newProps.value !== this.props.value) {
- this.setState({value: newProps.value});
- }
+ this.state = {value: props.value};
  }
 
  UNSAFE_componentWillReceiveProps(newProps) {
@@ -35,11 +26,17 @@ export default class Slider extends Component {
  ? createSliderWithTooltip(ReactSlider)
  : ReactSlider;
  }
- 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() {
@@ -87,9 +84,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 +112,7 @@ export default class Slider extends Component {
  'setProps',
  'updatemode',
  'value',
+ 'drag_value',
  'marks',
  'verticalHeight',
  ],

tests/dash_core_components_page.py

@@ -2,6 +2,7 @@
 from selenium.webdriver.support.ui import WebDriverWait
 from selenium.webdriver.common.by import By
 from selenium.webdriver.support import expected_conditions as EC
+from selenium.webdriver.common.action_chains import ActionChains
 
 logger = logging.getLogger(__name__)
 
@@ -100,3 +101,20 @@ def _wait_until_day_is_clickable(self, timeout=1):
  @property
  def date_picker_day_locator(self):
  return 'div[data-visible="true"] td.CalendarDay'
+
+ def click_and_hold_at_coord_fractions(self, elem_or_selector, fx, fy):
+ elem = self._get_element(elem_or_selector)
+
+ ActionChains(self.driver).move_to_element_with_offset(
+ elem, elem.size["width"] * fx, elem.size["height"] * fy
+ ).click_and_hold().perform()
+
+ def move_to_coord_fractions(self, elem_or_selector, fx, fy):
+ elem = self._get_element(elem_or_selector)
+
+ ActionChains(self.driver).move_to_element_with_offset(
+ elem, elem.size["width"] * fx, elem.size["height"] * fy
+ ).perform()
+
+ def release(self):
+ ActionChains(self.driver).release().perform()

tests/integration/sliders/test_sliders.py

@@ -160,3 +160,84 @@ def test_slsl005_slider_tooltip(dash_dcc):
  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(
+ [
+ dcc.Slider(
+ id="slider",
+ min=0,
+ max=20,
+ step=1,
+ value=5,
+ 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):
+ 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")
+ dash_dcc.wait_for_text_to_equal("#out-drag-value", "You have dragged 5")
+
+ 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")
+ 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")
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 5")
+ dash_dcc.release()
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 10")
+
+
+def test_slsl007_drag_value_rangeslider(dash_dcc):
+ 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.wait_for_text_to_equal("#out-value", "You have selected 5-15")
+ dash_dcc.release()
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 10-15")

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,19 @@ 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.
+ * If you want different actions during and after drag,
+ * leave `updatemode` as `mouseup` and use `drag_value`
+ * for the continuously updating value.
  */
  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

@@ -10,20 +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,
- };
- }
-
- propsToState(newProps) {
- if (newProps.value !== this.props.value) {
- this.setState({value: newProps.value});
- }
+ this.state = {value: props.value};
  }
 
  UNSAFE_componentWillReceiveProps(newProps) {
@@ -32,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() {
@@ -84,9 +81,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 +99,7 @@ export default class RangeSlider extends Component {
  [
  'className',
  'value',
+ 'drag_value',
  'setProps',
  'marks',
  'updatemode',

src/fragments/Slider.react.js

@@ -13,20 +13,11 @@ import {propTypes, defaultProps} from '../components/Slider.react';
 export default class Slider extends Component {
  constructor(props) {
  super(props);
- this.propsToState = this.propsToState.bind(this);
  this.DashSlider = props.tooltip
  ? createSliderWithTooltip(ReactSlider)
  : ReactSlider;
  this._computeStyle = computeSliderStyle();
- this.state = {
- value: props.value,
- };
- }
-
- propsToState(newProps) {
- if (newProps.value !== this.props.value) {
- this.setState({value: newProps.value});
- }
+ this.state = {value: props.value};
  }
 
  UNSAFE_componentWillReceiveProps(newProps) {
@@ -35,11 +26,17 @@ export default class Slider extends Component {
  ? createSliderWithTooltip(ReactSlider)
  : ReactSlider;
  }
- 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() {
@@ -87,9 +84,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 +112,7 @@ export default class Slider extends Component {
  'setProps',
  'updatemode',
  'value',
+ 'drag_value',
  'marks',
  'verticalHeight',
  ],

tests/dash_core_components_page.py

@@ -2,6 +2,7 @@
 from selenium.webdriver.support.ui import WebDriverWait
 from selenium.webdriver.common.by import By
 from selenium.webdriver.support import expected_conditions as EC
+from selenium.webdriver.common.action_chains import ActionChains
 
 logger = logging.getLogger(__name__)
 
@@ -100,3 +101,20 @@ def _wait_until_day_is_clickable(self, timeout=1):
  @property
  def date_picker_day_locator(self):
  return 'div[data-visible="true"] td.CalendarDay'
+
+ def click_and_hold_at_coord_fractions(self, elem_or_selector, fx, fy):
+ elem = self._get_element(elem_or_selector)
+
+ ActionChains(self.driver).move_to_element_with_offset(
+ elem, elem.size["width"] * fx, elem.size["height"] * fy
+ ).click_and_hold().perform()
+
+ def move_to_coord_fractions(self, elem_or_selector, fx, fy):
+ elem = self._get_element(elem_or_selector)
+
+ ActionChains(self.driver).move_to_element_with_offset(
+ elem, elem.size["width"] * fx, elem.size["height"] * fy
+ ).perform()
+
+ def release(self):
+ ActionChains(self.driver).release().perform()

tests/integration/sliders/test_sliders.py

@@ -160,3 +160,84 @@ def test_slsl005_slider_tooltip(dash_dcc):
  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(
+ [
+ dcc.Slider(
+ id="slider",
+ min=0,
+ max=20,
+ step=1,
+ value=5,
+ 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):
+ 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")
+ dash_dcc.wait_for_text_to_equal("#out-drag-value", "You have dragged 5")
+
+ 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")
+ 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")
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 5")
+ dash_dcc.release()
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 10")
+
+
+def test_slsl007_drag_value_rangeslider(dash_dcc):
+ 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.wait_for_text_to_equal("#out-value", "You have selected 5-15")
+ dash_dcc.release()
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 10-15")

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,19 @@ 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.
+ * If you want different actions during and after drag,
+ * leave `updatemode` as `mouseup` and use `drag_value`
+ * for the continuously updating value.
  */
  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

@@ -10,20 +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,
- };
- }
-
- propsToState(newProps) {
- if (newProps.value !== this.props.value) {
- this.setState({value: newProps.value});
- }
+ this.state = {value: props.value};
  }
 
  UNSAFE_componentWillReceiveProps(newProps) {
@@ -32,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() {
@@ -84,9 +81,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 +99,7 @@ export default class RangeSlider extends Component {
  [
  'className',
  'value',
+ 'drag_value',
  'setProps',
  'marks',
  'updatemode',

src/fragments/Slider.react.js

@@ -13,20 +13,11 @@ import {propTypes, defaultProps} from '../components/Slider.react';
 export default class Slider extends Component {
  constructor(props) {
  super(props);
- this.propsToState = this.propsToState.bind(this);
  this.DashSlider = props.tooltip
  ? createSliderWithTooltip(ReactSlider)
  : ReactSlider;
  this._computeStyle = computeSliderStyle();
- this.state = {
- value: props.value,
- };
- }
-
- propsToState(newProps) {
- if (newProps.value !== this.props.value) {
- this.setState({value: newProps.value});
- }
+ this.state = {value: props.value};
  }
 
  UNSAFE_componentWillReceiveProps(newProps) {
@@ -35,11 +26,17 @@ export default class Slider extends Component {
  ? createSliderWithTooltip(ReactSlider)
  : ReactSlider;
  }
- 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() {
@@ -87,9 +84,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 +112,7 @@ export default class Slider extends Component {
  'setProps',
  'updatemode',
  'value',
+ 'drag_value',
  'marks',
  'verticalHeight',
  ],

tests/dash_core_components_page.py

@@ -2,6 +2,7 @@
 from selenium.webdriver.support.ui import WebDriverWait
 from selenium.webdriver.common.by import By
 from selenium.webdriver.support import expected_conditions as EC
+from selenium.webdriver.common.action_chains import ActionChains
 
 logger = logging.getLogger(__name__)
 
@@ -100,3 +101,20 @@ def _wait_until_day_is_clickable(self, timeout=1):
  @property
  def date_picker_day_locator(self):
  return 'div[data-visible="true"] td.CalendarDay'
+
+ def click_and_hold_at_coord_fractions(self, elem_or_selector, fx, fy):
+ elem = self._get_element(elem_or_selector)
+
+ ActionChains(self.driver).move_to_element_with_offset(
+ elem, elem.size["width"] * fx, elem.size["height"] * fy
+ ).click_and_hold().perform()
+
+ def move_to_coord_fractions(self, elem_or_selector, fx, fy):
+ elem = self._get_element(elem_or_selector)
+
+ ActionChains(self.driver).move_to_element_with_offset(
+ elem, elem.size["width"] * fx, elem.size["height"] * fy
+ ).perform()
+
+ def release(self):
+ ActionChains(self.driver).release().perform()

tests/integration/sliders/test_sliders.py

@@ -160,3 +160,84 @@ def test_slsl005_slider_tooltip(dash_dcc):
  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(
+ [
+ dcc.Slider(
+ id="slider",
+ min=0,
+ max=20,
+ step=1,
+ value=5,
+ 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):
+ 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")
+ dash_dcc.wait_for_text_to_equal("#out-drag-value", "You have dragged 5")
+
+ 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")
+ 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")
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 5")
+ dash_dcc.release()
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 10")
+
+
+def test_slsl007_drag_value_rangeslider(dash_dcc):
+ 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.wait_for_text_to_equal("#out-value", "You have selected 5-15")
+ dash_dcc.release()
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 10-15")

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,19 @@ 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.
+ * If you want different actions during and after drag,
+ * leave `updatemode` as `mouseup` and use `drag_value`
+ * for the continuously updating value.
  */
  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

@@ -10,20 +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,
- };
- }
-
- propsToState(newProps) {
- if (newProps.value !== this.props.value) {
- this.setState({value: newProps.value});
- }
+ this.state = {value: props.value};
  }
 
  UNSAFE_componentWillReceiveProps(newProps) {
@@ -32,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() {
@@ -84,9 +81,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 +99,7 @@ export default class RangeSlider extends Component {
  [
  'className',
  'value',
+ 'drag_value',
  'setProps',
  'marks',
  'updatemode',

src/fragments/Slider.react.js

@@ -13,20 +13,11 @@ import {propTypes, defaultProps} from '../components/Slider.react';
 export default class Slider extends Component {
  constructor(props) {
  super(props);
- this.propsToState = this.propsToState.bind(this);
  this.DashSlider = props.tooltip
  ? createSliderWithTooltip(ReactSlider)
  : ReactSlider;
  this._computeStyle = computeSliderStyle();
- this.state = {
- value: props.value,
- };
- }
-
- propsToState(newProps) {
- if (newProps.value !== this.props.value) {
- this.setState({value: newProps.value});
- }
+ this.state = {value: props.value};
  }
 
  UNSAFE_componentWillReceiveProps(newProps) {
@@ -35,11 +26,17 @@ export default class Slider extends Component {
  ? createSliderWithTooltip(ReactSlider)
  : ReactSlider;
  }
- 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() {
@@ -87,9 +84,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 +112,7 @@ export default class Slider extends Component {
  'setProps',
  'updatemode',
  'value',
+ 'drag_value',
  'marks',
  'verticalHeight',
  ],

tests/dash_core_components_page.py

@@ -2,6 +2,7 @@
 from selenium.webdriver.support.ui import WebDriverWait
 from selenium.webdriver.common.by import By
 from selenium.webdriver.support import expected_conditions as EC
+from selenium.webdriver.common.action_chains import ActionChains
 
 logger = logging.getLogger(__name__)
 
@@ -100,3 +101,20 @@ def _wait_until_day_is_clickable(self, timeout=1):
  @property
  def date_picker_day_locator(self):
  return 'div[data-visible="true"] td.CalendarDay'
+
+ def click_and_hold_at_coord_fractions(self, elem_or_selector, fx, fy):
+ elem = self._get_element(elem_or_selector)
+
+ ActionChains(self.driver).move_to_element_with_offset(
+ elem, elem.size["width"] * fx, elem.size["height"] * fy
+ ).click_and_hold().perform()
+
+ def move_to_coord_fractions(self, elem_or_selector, fx, fy):
+ elem = self._get_element(elem_or_selector)
+
+ ActionChains(self.driver).move_to_element_with_offset(
+ elem, elem.size["width"] * fx, elem.size["height"] * fy
+ ).perform()
+
+ def release(self):
+ ActionChains(self.driver).release().perform()

tests/integration/sliders/test_sliders.py

@@ -160,3 +160,84 @@ def test_slsl005_slider_tooltip(dash_dcc):
  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(
+ [
+ dcc.Slider(
+ id="slider",
+ min=0,
+ max=20,
+ step=1,
+ value=5,
+ 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):
+ 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")
+ dash_dcc.wait_for_text_to_equal("#out-drag-value", "You have dragged 5")
+
+ 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")
+ 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")
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 5")
+ dash_dcc.release()
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 10")
+
+
+def test_slsl007_drag_value_rangeslider(dash_dcc):
+ 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.wait_for_text_to_equal("#out-value", "You have selected 5-15")
+ dash_dcc.release()
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 10-15")

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,19 @@ 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.
+ * If you want different actions during and after drag,
+ * leave `updatemode` as `mouseup` and use `drag_value`
+ * for the continuously updating value.
  */
  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

@@ -10,20 +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,
- };
- }
-
- propsToState(newProps) {
- if (newProps.value !== this.props.value) {
- this.setState({value: newProps.value});
- }
+ this.state = {value: props.value};
  }
 
  UNSAFE_componentWillReceiveProps(newProps) {
@@ -32,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() {
@@ -84,9 +81,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 +99,7 @@ export default class RangeSlider extends Component {
  [
  'className',
  'value',
+ 'drag_value',
  'setProps',
  'marks',
  'updatemode',

src/fragments/Slider.react.js

@@ -13,20 +13,11 @@ import {propTypes, defaultProps} from '../components/Slider.react';
 export default class Slider extends Component {
  constructor(props) {
  super(props);
- this.propsToState = this.propsToState.bind(this);
  this.DashSlider = props.tooltip
  ? createSliderWithTooltip(ReactSlider)
  : ReactSlider;
  this._computeStyle = computeSliderStyle();
- this.state = {
- value: props.value,
- };
- }
-
- propsToState(newProps) {
- if (newProps.value !== this.props.value) {
- this.setState({value: newProps.value});
- }
+ this.state = {value: props.value};
  }
 
  UNSAFE_componentWillReceiveProps(newProps) {
@@ -35,11 +26,17 @@ export default class Slider extends Component {
  ? createSliderWithTooltip(ReactSlider)
  : ReactSlider;
  }
- 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() {
@@ -87,9 +84,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 +112,7 @@ export default class Slider extends Component {
  'setProps',
  'updatemode',
  'value',
+ 'drag_value',
  'marks',
  'verticalHeight',
  ],

tests/dash_core_components_page.py

@@ -2,6 +2,7 @@
 from selenium.webdriver.support.ui import WebDriverWait
 from selenium.webdriver.common.by import By
 from selenium.webdriver.support import expected_conditions as EC
+from selenium.webdriver.common.action_chains import ActionChains
 
 logger = logging.getLogger(__name__)
 
@@ -100,3 +101,20 @@ def _wait_until_day_is_clickable(self, timeout=1):
  @property
  def date_picker_day_locator(self):
  return 'div[data-visible="true"] td.CalendarDay'
+
+ def click_and_hold_at_coord_fractions(self, elem_or_selector, fx, fy):
+ elem = self._get_element(elem_or_selector)
+
+ ActionChains(self.driver).move_to_element_with_offset(
+ elem, elem.size["width"] * fx, elem.size["height"] * fy
+ ).click_and_hold().perform()
+
+ def move_to_coord_fractions(self, elem_or_selector, fx, fy):
+ elem = self._get_element(elem_or_selector)
+
+ ActionChains(self.driver).move_to_element_with_offset(
+ elem, elem.size["width"] * fx, elem.size["height"] * fy
+ ).perform()
+
+ def release(self):
+ ActionChains(self.driver).release().perform()

tests/integration/sliders/test_sliders.py

@@ -160,3 +160,84 @@ def test_slsl005_slider_tooltip(dash_dcc):
  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(
+ [
+ dcc.Slider(
+ id="slider",
+ min=0,
+ max=20,
+ step=1,
+ value=5,
+ 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):
+ 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")
+ dash_dcc.wait_for_text_to_equal("#out-drag-value", "You have dragged 5")
+
+ 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")
+ 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")
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 5")
+ dash_dcc.release()
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 10")
+
+
+def test_slsl007_drag_value_rangeslider(dash_dcc):
+ 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.wait_for_text_to_equal("#out-value", "You have selected 5-15")
+ dash_dcc.release()
+ dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 10-15")