fix(slider,slide-toggle): use the grab cursor (#3821)

Uses the `grab` cursor when hovering over an active slider's thumb and thumb labels, as well as on active slide toggles.

Fixes #3778.

Author: crisbeto

src/lib/core/style/_vendor-prefixes.scss

@@ -28,4 +28,9 @@
   cursor: -webkit-grab;
   cursor: grab;
 }
+
+@mixin cursor-grabbing {
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+}
 /* stylelint-enable */

src/lib/slide-toggle/slide-toggle.scss

@@ -103,7 +103,9 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
 
   // Once the thumb container is being dragged around, we remove the transition duration to
   // make the drag feeling fast and not delayed.
-  &.mat-dragging {
+  &.mat-dragging, &:active {
+    @include cursor-grabbing;
+
     transition-duration: 0ms;
   }
 }

src/lib/slider/slider.scss

@@ -1,4 +1,5 @@
 @import '../core/style/variables';
+@import '../core/style/vendor-prefixes';
 
 
 // This refers to the thickness of the slider. On a horizontal slider this is the height, on a
@@ -97,7 +98,20 @@ $mat-slider-focus-ring-size: 30px !default;
   }
 }
 
+%_mat-slider-cursor {
+  .mat-slider:not(.mat-slider-disabled) & {
+    @include cursor-grab;
+  }
+
+  .mat-slider:not(.mat-slider-disabled) &:active,
+  .mat-slider-sliding:not(.mat-slider-disabled) & {
+    @include cursor-grabbing;
+  }
+}
+
 .mat-slider-thumb {
+  @extend %_mat-slider-cursor;
+
   position: absolute;
   right: -$mat-slider-thumb-size / 2;
   bottom: -$mat-slider-thumb-size / 2;
@@ -113,6 +127,8 @@ $mat-slider-focus-ring-size: 30px !default;
 }
 
 .mat-slider-thumb-label {
+  @extend %_mat-slider-cursor;
+
   display: none;
   align-items: center;
   justify-content: center;