[Slider] onChange being called when value is not changing

[DanSchoppe]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://codesandbox.io/s/mui-slider-excessive-onchange-dudwxj?file=/demo.tsx
(^ forked from Discrete Sliders demo)

Steps:

1. Open console
2. Click and release slider thumb
3. Observe onChange handler has fired and console.log'd the existing value without a change to value

Current behavior 😯

onChange fires when the slider thumb is clicked, but not moved.

Expected behavior 🤔

Per #34448: [Slider] Only call onChange if the value changed.

Perhaps these tests are not effective:

material-ui/packages/mui-material/src/Slider/Slider.test.js

Lines 172 to 198 in b6b9314

	it('should only fire onChange when the value changes', () => {
	const handleChange = spy();
	const { container } = render(<Slider defaultValue={20} onChange={handleChange} />);
	stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
	width: 100,
	left: 0,
	}));
	fireEvent.mouseDown(container.firstChild, {
	buttons: 1,
	clientX: 21,
	});
	fireEvent.mouseMove(document.body, {
	buttons: 1,
	clientX: 22,
	});
	// Sometimes another event with the same position is fired by the browser.
	fireEvent.mouseMove(document.body, {
	buttons: 1,
	clientX: 22,
	});
	expect(handleChange.callCount).to.equal(2);
	expect(handleChange.args[0][1]).to.deep.equal(21);
	expect(handleChange.args[1][1]).to.deep.equal(22);
	});

Context 🔦

Excessive onChange invocations can degrade the performance of an application if downstream effects are expensive to compute.

Your environment 🌎

No response

[mj12albert]

@DanSchoppe Thanks for reporting this, I agree its a bug, clicking a Thumb in place doesn't change the value and shouldn't call onChange

[gitstart]

@DanSchoppe @mj12albert @michaldudak I would like to pick this up

[ZeeshanTamboli]

@gitstart Please go ahead and create a PR.