fix(slide-toggle): invalid change events with no new value (#3555)

Currently the slide-toggle will always emit a change event on dragend.
This is not always correct, because the `checked` value only changes if 50% of the distance have been dragged.

Fixes #3526

Author: devversion

src/lib/slide-toggle/slide-toggle.spec.ts

@@ -563,6 +563,22 @@ describe('MdSlideToggle', () => {
       expect(testComponent.lastEvent.checked).toBe(true);
     }));
 
+    it('should not emit a change event when the value did not change', fakeAsync(() => {
+      expect(slideToggle.checked).toBe(false);
+
+      gestureConfig.emitEventForElement('slidestart', slideThumbContainer);
+      gestureConfig.emitEventForElement('slide', slideThumbContainer, { deltaX: 0 });
+      gestureConfig.emitEventForElement('slideend', slideThumbContainer);
+
+      // Flush the timeout for the slide ending.
+      tick();
+
+      expect(slideThumbContainer.classList).not.toContain('mat-dragging');
+      expect(slideToggle.checked).toBe(false);
+      expect(testComponent.lastEvent)
+          .toBeFalsy('Expected the slide-toggle to not emit a change event.');
+    }));
+
     it('should update the checked property of the input', fakeAsync(() => {
       expect(inputElement.checked).toBe(false);
 

src/lib/slide-toggle/slide-toggle.ts

@@ -258,8 +258,12 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
 
   _onDragEnd() {
     if (this._slideRenderer.dragging) {
+      let _previousChecked = this.checked;
       this.checked = this._slideRenderer.dragPercentage > 50;
-      this._emitChangeEvent();
+
+      if (_previousChecked !== this.checked) {
+        this._emitChangeEvent();
+      }
 
       // The drag should be stopped outside of the current event handler, because otherwise the
       // click event will be fired before and will revert the drag change.