fix(material/slider): avoid error on some touchstart events

src/material/slider/slider.spec.ts

@@ -18,7 +18,8 @@ import {
   dispatchKeyboardEvent,
   dispatchMouseEvent,
   createKeyboardEvent,
-} from '../../cdk/testing/private';
+  createTouchEvent,
+} from '@angular/cdk/testing/private';
 import {Component, DebugElement, Type, ViewChild} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
@@ -242,6 +243,17 @@ describe('MatSlider', () => {
     it('should have a focus indicator', () => {
       expect(sliderNativeElement.classList.contains('mat-focus-indicator')).toBe(true);
     });
+
+    it('should not try to preventDefault on a non-cancelable event', () => {
+      const event = createTouchEvent('touchstart');
+      const spy = spyOn(event, 'preventDefault');
+      Object.defineProperty(event, 'cancelable', {value: false});
+
+      dispatchEvent(sliderNativeElement, event);
+      fixture.detectChanges();
+
+      expect(spy).not.toHaveBeenCalled();
+    });
   });
 
   describe('disabled slider', () => {

src/material/slider/slider.ts

@@ -672,14 +672,20 @@ export class MatSlider
         const oldValue = this.value;
         this._isSliding = 'pointer';
         this._lastPointerEvent = event;
-        event.preventDefault();
         this._focusHostElement();
         this._onMouseenter(); // Simulate mouseenter in case this is a mobile device.
         this._bindGlobalEvents(event);
         this._focusHostElement();
         this._updateValueFromPosition(pointerPosition);
         this._valueOnSlideStart = oldValue;
 
+        // Despite the fact that we explicitly bind active events, in some cases the browser
+        // still dispatches non-cancelable events which cause this call to throw an error.
+        // There doesn't appear to be a good way of avoiding them. See #23820.
+        if (event.cancelable) {
+          event.preventDefault();
+        }
+
         // Emit a change and input event if the value changed.
         if (oldValue != this.value) {
           this._emitInputEvent();