feat(material-experimental/mdc-slider): implement slider thumb ripples (#21979)

* create MatSliderVisualThumb
* create slider-thumb.html & slider-thumb.scss

Author: wagnermaciel

src/material-experimental/mdc-slider/BUILD.bazel

@@ -17,7 +17,10 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    assets = [":slider_scss"] + glob(["**/*.html"]),
+    assets = [
+        ":slider_scss",
+        ":slider_thumb_scss",
+    ] + glob(["**/*.html"]),
     module_name = "@angular/material-experimental/mdc-slider",
     deps = [
         "//src/cdk/bidi",
@@ -35,6 +38,7 @@ sass_library(
     deps = [
         "//src/cdk/a11y:a11y_scss_lib",
         "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
     ],
 )
 
@@ -50,6 +54,11 @@ sass_binary(
     ],
 )
 
+sass_binary(
+    name = "slider_thumb_scss",
+    src = "slider-thumb.scss",
+)
+
 ###########
 # Testing
 ###########

src/material-experimental/mdc-slider/_slider-theme.scss

@@ -1,5 +1,6 @@
 @use '@material/slider/slider' as mdc-slider;
 @use '@material/slider/slider-theme';
+@use '@material/theme/variables' as theme-variables;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/ripple/ripple';
 @use '../../material/core/theming/theming';
@@ -106,9 +107,15 @@
     ),
     $query: mdc-helpers.$mat-theme-styles-query
   );
-  @include ripple.color((
+  @include ripple.theme((
     foreground: (
-      base: mdc-theme-prop-value($color)
+      base: theme-variables.prop-value($color)
     ),
   ));
+  .mat-mdc-slider-hover-ripple {
+    background-color: rgba(theme-variables.prop-value($color), 0.05);
+  }
+  .mat-mdc-slider-focus-ripple, .mat-mdc-slider-active-ripple {
+    background-color: rgba(theme-variables.prop-value($color), 0.2);
+  }
 }

src/material-experimental/mdc-slider/module.ts

@@ -8,15 +8,16 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatCommonModule} from '@angular/material-experimental/mdc-core';
-import {MatSlider, MatSliderThumb} from './slider';
+import {MatCommonModule, MatRippleModule} from '@angular/material-experimental/mdc-core';
+import {MatSlider, MatSliderThumb, MatSliderVisualThumb} from './slider';
 
 @NgModule({
-  imports: [MatCommonModule, CommonModule],
+  imports: [MatCommonModule, CommonModule, MatRippleModule],
   exports: [MatSlider, MatSliderThumb],
   declarations: [
     MatSlider,
     MatSliderThumb,
+    MatSliderVisualThumb,
   ],
 })
 export class MatSliderModule {

src/material-experimental/mdc-slider/slider-thumb.html

@@ -0,0 +1,7 @@
+<div class="mdc-slider__value-indicator-container" *ngIf="discrete">
+  <div class="mdc-slider__value-indicator">
+    <span class="mdc-slider__value-indicator-text">{{valueIndicatorText}}</span>
+  </div>
+</div>
+<div class="mdc-slider__thumb-knob" #knob></div>
+<div matRipple></div>

src/material-experimental/mdc-slider/slider-thumb.scss

@@ -0,0 +1,4 @@
+.mat-mdc-slider-visual-thumb .mat-ripple {
+  height: 100%;
+  width: 100%;
+}

src/material-experimental/mdc-slider/slider.html

@@ -13,11 +13,9 @@
 </div>
 
 <!-- Thumbs -->
-<div class="mdc-slider__thumb" *ngFor="let thumb of _getThumbTypes()" #thumb>
-  <div class="mdc-slider__value-indicator-container" *ngIf="discrete">
-    <div class="mdc-slider__value-indicator">
-      <span class="mdc-slider__value-indicator-text">{{_getValueIndicatorText(thumb)}}</span>
-    </div>
-  </div>
-  <div class="mdc-slider__thumb-knob" #knob></div>
-</div>
+<mat-slider-visual-thumb
+  *ngFor="let thumb of _inputs"
+  [discrete]="discrete"
+  [thumbPosition]="thumb._thumbPosition"
+  [valueIndicatorText]="_getValueIndicatorText(thumb._thumbPosition)">
+</mat-slider-visual-thumb>

src/material-experimental/mdc-slider/slider.scss

@@ -3,6 +3,6 @@
 
 @include mdc-slider.without-ripple($query: $mat-base-styles-query);
 
-.mdc-slider {
+.mat-mdc-slider {
   display: block;
 }