fix(slider): not stopping drag when released outside of viewport (#18905)

We're binding the slider events to the `document.body` which means that we won't pick up the ones that happen outside the viewport. These changes move the events to the `document`.

Fixes #18888.

Author: crisbeto

src/material/slider/slider.spec.ts

@@ -1663,7 +1663,7 @@ function dispatchSlideEvent(sliderElement: HTMLElement, percent: number): void {
   const dimensions = trackElement.getBoundingClientRect();
   const x = dimensions.left + (dimensions.width * percent);
   const y = dimensions.top + (dimensions.height * percent);
-  dispatchMouseEvent(document.body, 'mousemove', x, y);
+  dispatchMouseEvent(document, 'mousemove', x, y);
 }
 
 /**
@@ -1690,7 +1690,7 @@ function dispatchSlideEndEvent(sliderElement: HTMLElement, percent: number): voi
   const dimensions = trackElement.getBoundingClientRect();
   const x = dimensions.left + (dimensions.width * percent);
   const y = dimensions.top + (dimensions.height * percent);
-  dispatchMouseEvent(document.body, 'mouseup', x, y);
+  dispatchMouseEvent(document, 'mouseup', x, y);
 }
 
 /**

src/material/slider/slider.ts

@@ -709,16 +709,19 @@ export class MatSlider extends _MatSliderMixinBase
    * as they're swiping across the screen.
    */
   private _bindGlobalEvents(triggerEvent: TouchEvent | MouseEvent) {
-    if (typeof this._document !== 'undefined' && this._document) {
-      const body = this._document.body;
+    // Note that we bind the events to the `document`, because it allows us to capture
+    // drag cancel events where the user's pointer is outside the browser window.
+    const document = this._document;
+
+    if (typeof document !== 'undefined' && document) {
       const isTouch = isTouchEvent(triggerEvent);
       const moveEventName = isTouch ? 'touchmove' : 'mousemove';
       const endEventName = isTouch ? 'touchend' : 'mouseup';
-      body.addEventListener(moveEventName, this._pointerMove, activeEventOptions);
-      body.addEventListener(endEventName, this._pointerUp, activeEventOptions);
+      document.addEventListener(moveEventName, this._pointerMove, activeEventOptions);
+      document.addEventListener(endEventName, this._pointerUp, activeEventOptions);
 
       if (isTouch) {
-        body.addEventListener('touchcancel', this._pointerUp, activeEventOptions);
+        document.addEventListener('touchcancel', this._pointerUp, activeEventOptions);
       }
     }
 
@@ -731,13 +734,14 @@ export class MatSlider extends _MatSliderMixinBase
 
   /** Removes any global event listeners that we may have added. */
   private _removeGlobalEvents() {
-    if (typeof this._document !== 'undefined' && this._document) {
-      const body = this._document.body;
-      body.removeEventListener('mousemove', this._pointerMove, activeEventOptions);
-      body.removeEventListener('mouseup', this._pointerUp, activeEventOptions);
-      body.removeEventListener('touchmove', this._pointerMove, activeEventOptions);
-      body.removeEventListener('touchend', this._pointerUp, activeEventOptions);
-      body.removeEventListener('touchcancel', this._pointerUp, activeEventOptions);
+    const document = this._document;
+
+    if (typeof document !== 'undefined' && document) {
+      document.removeEventListener('mousemove', this._pointerMove, activeEventOptions);
+      document.removeEventListener('mouseup', this._pointerUp, activeEventOptions);
+      document.removeEventListener('touchmove', this._pointerMove, activeEventOptions);
+      document.removeEventListener('touchend', this._pointerUp, activeEventOptions);
+      document.removeEventListener('touchcancel', this._pointerUp, activeEventOptions);
     }
 
     const window = this._getWindow();