diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js
index 671227b57814af..fae6f8ba959bb3 100644
--- a/packages/material-ui/src/Slider/Slider.js
+++ b/packages/material-ui/src/Slider/Slider.js
@@ -405,6 +405,22 @@ const Slider = React.forwardRef(function Slider(props, ref) {
name: 'Slider',
});
+ const handleChange =
+ onChange &&
+ ((event, value) => {
+ if (!(event instanceof Event)) event.persist();
+
+ // Redefine target to allow name and value to be read.
+ // This allows seamless integration with the most popular form libraries.
+ // https://github.com/mui-org/material-ui/issues/13485#issuecomment-676048492
+ Object.defineProperty(event, 'target', {
+ writable: true,
+ value: { value, name },
+ });
+
+ onChange(event, value);
+ });
+
const range = Array.isArray(valueDerived);
let values = range ? valueDerived.slice().sort(asc) : [valueDerived];
values = values.map((value) => clamp(value, min, max));
@@ -538,8 +554,8 @@ const Slider = React.forwardRef(function Slider(props, ref) {
setValueState(newValue);
setFocusVisible(index);
- if (onChange) {
- onChange(event, newValue);
+ if (handleChange) {
+ handleChange(event, newValue);
}
if (onChangeCommitted) {
onChangeCommitted(event, newValue);
@@ -625,8 +641,8 @@ const Slider = React.forwardRef(function Slider(props, ref) {
focusThumb({ sliderRef, activeIndex, setActive });
setValueState(newValue);
- if (onChange) {
- onChange(nativeEvent, newValue);
+ if (handleChange) {
+ handleChange(nativeEvent, newValue);
}
});
@@ -674,8 +690,8 @@ const Slider = React.forwardRef(function Slider(props, ref) {
setValueState(newValue);
- if (onChange) {
- onChange(event, newValue);
+ if (handleChange) {
+ handleChange(event, newValue);
}
const doc = ownerDocument(sliderRef.current);
@@ -725,8 +741,8 @@ const Slider = React.forwardRef(function Slider(props, ref) {
setValueState(newValue);
- if (onChange) {
- onChange(event, newValue);
+ if (handleChange) {
+ handleChange(event, newValue);
}
const doc = ownerDocument(sliderRef.current);
diff --git a/packages/material-ui/src/Slider/Slider.test.js b/packages/material-ui/src/Slider/Slider.test.js
index 01a30e0dd3dde8..6053cec9cc62eb 100644
--- a/packages/material-ui/src/Slider/Slider.test.js
+++ b/packages/material-ui/src/Slider/Slider.test.js
@@ -700,6 +700,27 @@ describe('', () => {
expect(container.querySelectorAll(`.${classes.mark}[data-index="2"]`).length).to.equal(1);
});
+ it('should pass "name" and "value" as part of the event.target for onChange', () => {
+ const handleChange = stub().callsFake((event) => event.target);
+ const { getByRole } = render(
+ ,
+ );
+ const thumb = getByRole('slider');
+
+ act(() => {
+ thumb.focus();
+ fireEvent.keyDown(thumb, {
+ key: 'ArrowRight',
+ });
+ });
+
+ expect(handleChange.callCount).to.equal(1);
+ expect(handleChange.firstCall.returnValue).to.deep.equal({
+ name: 'change-testing',
+ value: 4,
+ });
+ });
+
describe('prop: ValueLabelComponent', () => {
it('receives the formatted value', () => {
function ValueLabelComponent(props) {