From c43a28c249f78cfd0fffd7ce62fcda29c91781a0 Mon Sep 17 00:00:00 2001 From: blandine Date: Wed, 29 Aug 2018 16:26:46 +0200 Subject: [PATCH] add onChanged prop on Slider (#6108) --- .../slider-onBlur_2018-08-29-14-33.json | 11 +++++++++++ .../src/components/Slider/Slider.base.tsx | 6 +++++- .../src/components/Slider/Slider.types.ts | 5 +++++ 3 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 common/changes/office-ui-fabric-react/slider-onBlur_2018-08-29-14-33.json diff --git a/common/changes/office-ui-fabric-react/slider-onBlur_2018-08-29-14-33.json b/common/changes/office-ui-fabric-react/slider-onBlur_2018-08-29-14-33.json new file mode 100644 index 00000000000000..40f45f576162ae --- /dev/null +++ b/common/changes/office-ui-fabric-react/slider-onBlur_2018-08-29-14-33.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "add onBlur on Slider", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "blandine.descamps@gmail.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Slider/Slider.base.tsx b/packages/office-ui-fabric-react/src/components/Slider/Slider.base.tsx index 4ff347ba7150dc..1d55f783f4ff61 100644 --- a/packages/office-ui-fabric-react/src/components/Slider/Slider.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Slider/Slider.base.tsx @@ -252,12 +252,16 @@ export class SliderBase extends BaseComponent implem ); } - private _onMouseUpOrTouchEnd = (): void => { + private _onMouseUpOrTouchEnd = (event: MouseEvent | TouchEvent): void => { // Synchronize the renderedValue to the actual value. this.setState({ renderedValue: this.state.value }); + if (this.props.onChanged) { + this.props.onChanged(event, this.state.value as number); + } + this._events.off(); }; diff --git a/packages/office-ui-fabric-react/src/components/Slider/Slider.types.ts b/packages/office-ui-fabric-react/src/components/Slider/Slider.types.ts index 400f418889211c..4db1541ee0bc98 100644 --- a/packages/office-ui-fabric-react/src/components/Slider/Slider.types.ts +++ b/packages/office-ui-fabric-react/src/components/Slider/Slider.types.ts @@ -72,6 +72,11 @@ export interface ISliderProps extends React.Props { */ onChange?: (value: number) => void; + /** + * Callback on mouse up or touch end + */ + onChanged?: (event: MouseEvent | TouchEvent, value: number) => void; + /** * A description of the Slider for the benefit of screen readers. */