fix(slider): inconsistent cursor behavior if user's pointer moves around while dragging

Currently we only change the cursor in the slider if the user's pointer is over the thumb or thumb label. This doesn't work very well while dragging, because the elements aren't very large and the pointer could move off of it temporarily while dragging. These changes make it so the cursor for the entire slider is changed while dragging.

Furthermore, on Safari the cursor goes into text selection mode while dragging. These changes address this issue as well.

Fixes #14613.

(cherry picked from commit 7039b25)

Author: crisbeto

src/material/slider/slider.scss

@@ -35,6 +35,11 @@ $mat-slider-focus-ring-size: 30px !default;
   padding: $mat-slider-padding;
   outline: none;
   vertical-align: middle;
+
+  &:not(.mat-slider-disabled):active,
+  &.mat-slider-sliding:not(.mat-slider-disabled) {
+    @include cursor-grabbing;
+  }
 }
 
 .mat-slider-wrapper {
@@ -102,14 +107,9 @@ $mat-slider-focus-ring-size: 30px !default;
 }
 
 %_mat-slider-cursor {
-  .mat-slider:not(.mat-slider-disabled) & {
+  .mat-slider:not(.mat-slider-disabled):not(.mat-slider-sliding) & {
     @include cursor-grab;
   }
-
-  .mat-slider:not(.mat-slider-disabled) &:active,
-  .mat-slider-sliding:not(.mat-slider-disabled) & {
-    @include cursor-grabbing;
-  }
 }
 
 .mat-slider-thumb {

src/material/slider/slider.spec.ts

@@ -215,6 +215,13 @@ describe('MatSlider', () => {
       expect(sliderInstance.value).toBe(100);
     });
 
+    it('should prevent the default action of the `selectstart` event', () => {
+      const event = dispatchFakeEvent(sliderNativeElement, 'selectstart');
+      fixture.detectChanges();
+
+      expect(event.defaultPrevented).toBe(true);
+    });
+
   });
 
   describe('disabled slider', () => {

src/material/slider/slider.ts

@@ -120,6 +120,9 @@ const _MatSliderMixinBase:
     '(slide)': '_onSlide($event)',
     '(slideend)': '_onSlideEnd()',
     '(slidestart)': '_onSlideStart($event)',
+    // On Safari starting to slide temporarily triggers text selection mode which
+    // show the wrong cursor. We prevent it by stopping the `selectstart` event.
+    '(selectstart)': '$event.preventDefault()',
     'class': 'mat-slider',
     'role': 'slider',
     '[tabIndex]': 'tabIndex',