diff --git a/components/slider/Slider.d.ts b/components/slider/Slider.d.ts index b33f1e3b..3e2d3300 100644 --- a/components/slider/Slider.d.ts +++ b/components/slider/Slider.d.ts @@ -81,6 +81,14 @@ export interface SliderProps extends ReactToolbox.Props { * Callback function that will be invoked when the slider value changes. */ onChange?: Function; + /** + * Callback function that will be invoked when the slider starts being dragged. + */ + onDragStart?: Function; + /** + * Callback function that will be invoked when the slider stops being dragged. + */ + onDragStop?: Function; /** * If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting. * @default false diff --git a/components/slider/Slider.js b/components/slider/Slider.js index 3a7baa5e..10ff0598 100644 --- a/components/slider/Slider.js +++ b/components/slider/Slider.js @@ -18,6 +18,8 @@ const factory = (ProgressBar, Input) => { max: PropTypes.number, min: PropTypes.number, onChange: PropTypes.func, + onDragStart: PropTypes.func, + onDragStop: PropTypes.func, pinned: PropTypes.bool, snaps: PropTypes.bool, step: PropTypes.number, @@ -45,6 +47,8 @@ const factory = (ProgressBar, Input) => { editable: false, max: 100, min: 0, + onDragStart: () => {}, + onDragStop: () => {}, pinned: false, snaps: false, step: 0.01, @@ -73,6 +77,16 @@ const factory = (ProgressBar, Input) => { return this.state.inputFocused || !nextState.inputFocused; } + componentWillUpdate(nextProps, nextState) { + if (nextState.pressed !== this.state.pressed) { + if (nextState.pressed) { + this.props.onDragStart(); + } else { + this.props.onDragStop(); + } + } + } + componentWillUnmount() { window.removeEventListener('resize', this.handleResize); events.removeEventsFromDocument(this.getMouseEventMap()); diff --git a/components/slider/readme.md b/components/slider/readme.md index 57eaa255..69a275ac 100644 --- a/components/slider/readme.md +++ b/components/slider/readme.md @@ -42,16 +42,18 @@ This component can be styled by context providing a theme with the key `RTSlider | Name | Type | Default | Description| |:-----|:-----|:-----|:-----| -| `className` | `String` | `''` | Additional class name to provide custom styling.| -| `disabled` | `Boolean` | `false` | If true, component will be disabled.| -| `editable` | `Boolean` | `false` | If true, an input is shown and the user can set the slider from keyboard value.| -| `max` | `Number` | `100` | Maximum value permitted.| -| `min` | `Number` | `0` | Minimum value permitted.| -| `onChange` | `Function` | | Callback function that will be invoked when the slider value changes.| -| `pinned` | `Boolean` | `false` | If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.| -| `snaps` | `Boolean` | `false` | If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.| -| `step` | `Number` | `0.01` | Amount to vary the value when the knob is moved or increase/decrease is called.| -| `value` | `Number` | `0` | Current value of the slider.| +| `className` | `String` | `''` | Additional class name to provide custom styling.| +| `disabled` | `Boolean` | `false` | If true, component will be disabled.| +| `editable` | `Boolean` | `false` | If true, an input is shown and the user can set the slider from keyboard value.| +| `max` | `Number` | `100` | Maximum value permitted.| +| `min` | `Number` | `0` | Minimum value permitted.| +| `onChange` | `Function` | | Callback function that will be invoked when the slider value changes.| +| `onDragStart` | `Function` | `() => {}` | Callback function that will be invoked when the slider starts being dragged. | +| `onDragStop` | `Function` | `() => {}` | Callback function that will be invoked when the slider stops being dragged.| +| `pinned` | `Boolean` | `false` | If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.| +| `snaps` | `Boolean` | `false` | If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.| +| `step` | `Number` | `0.01` | Amount to vary the value when the knob is moved or increase/decrease is called.| +| `value` | `Number` | `0` | Current value of the slider.| ## Theme