diff --git a/src/lib/checkbox/checkbox.html b/src/lib/checkbox/checkbox.html
index e706b5c2940f..e1691a3d9955 100644
--- a/src/lib/checkbox/checkbox.html
+++ b/src/lib/checkbox/checkbox.html
@@ -18,7 +18,10 @@
+ [matRippleRadius]="_rippleConfig.radius"
+ [matRippleSpeedFactor]="_rippleConfig.speedFactor"
+ [matRippleCentered]="_rippleConfig.centered">
+
+ [matRippleCentered]="_rippleConfig.centered"
+ [matRippleRadius]="_rippleConfig.radius"
+ [matRippleSpeedFactor]="_rippleConfig.speedFactor">
+
+ [matRippleDisabled]="disableRipple || disabled"
+ [matRippleCentered]="_rippleConfig.centered"
+ [matRippleRadius]="_rippleConfig.radius"
+ [matRippleSpeedFactor]="_rippleConfig.speedFactor">
diff --git a/src/lib/slide-toggle/slide-toggle.scss b/src/lib/slide-toggle/slide-toggle.scss
index 8fd0e11da000..80b714f95b89 100644
--- a/src/lib/slide-toggle/slide-toggle.scss
+++ b/src/lib/slide-toggle/slide-toggle.scss
@@ -160,7 +160,6 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
left: $mat-slide-toggle-thumb-size / 2 - $mat-slide-toggle-ripple-radius;
height: $mat-slide-toggle-ripple-radius * 2;
width: $mat-slide-toggle-ripple-radius * 2;
- border-radius: 50%;
z-index: 1;
pointer-events: none;
}
diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts
index 7d0110bbde97..df5c5e3167eb 100644
--- a/src/lib/slide-toggle/slide-toggle.ts
+++ b/src/lib/slide-toggle/slide-toggle.ts
@@ -38,6 +38,7 @@ import {
mixinDisabled,
mixinDisableRipple,
mixinTabIndex,
+ RippleConfig,
RippleRef,
} from '@angular/material/core';
@@ -139,6 +140,9 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
/** Reference to the ripple directive on the thumb container. */
@ViewChild(MatRipple) _ripple: MatRipple;
+ /** Ripple configuration for the mouse ripples and focus indicators. */
+ _rippleConfig: RippleConfig = {centered: true, radius: 23, speedFactor: 1.5};
+
constructor(elementRef: ElementRef,
renderer: Renderer2,
private _platform: Platform,
@@ -232,7 +236,7 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
private _onInputFocusChange(focusOrigin: FocusOrigin) {
if (!this._focusRipple && focusOrigin === 'keyboard') {
// For keyboard focus show a persistent ripple as focus indicator.
- this._focusRipple = this._ripple.launch(0, 0, {persistent: true, centered: true});
+ this._focusRipple = this._ripple.launch(0, 0, {persistent: true, ...this._rippleConfig});
} else if (!focusOrigin) {
this.onTouched();