From b8e081487b95a8a00e8d456f5011de9ad44af426 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 18 Nov 2019 13:09:21 +0100
Subject: [PATCH 1/2] [Slider] Increase interaction area and keep thumb in
 parent boundaries

---
 packages/material-ui/src/Slider/Slider.js | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js
index ad7f144e18055f..7ca8b7ba89bef3 100644
--- a/packages/material-ui/src/Slider/Slider.js
+++ b/packages/material-ui/src/Slider/Slider.js
@@ -136,7 +136,7 @@ export const styles = theme => ({
     height: 2,
     width: '100%',
     boxSizing: 'content-box',
-    padding: '11px 0',
+    padding: '13px 0',
     display: 'inline-block',
     position: 'relative',
     cursor: 'pointer',
@@ -152,7 +152,7 @@ export const styles = theme => ({
     '&$vertical': {
       width: 2,
       height: '100%',
-      padding: '0 11px',
+      padding: '0 13px',
     },
     // The primary input mechanism of the device includes a pointing device of limited accuracy.
     '@media (pointer: coarse)': {
@@ -247,11 +247,12 @@ export const styles = theme => ({
     '&::after': {
       position: 'absolute',
       content: '""',
-      // reach 48px touch target (2 * 18 + thumb circumference)
-      left: -18,
-      top: -18,
-      right: -18,
-      bottom: -18,
+      borderRadius: '50%',
+      // x10 thumb surface (from 12px^2 to 40px^2).
+      left: -14,
+      top: -14,
+      right: -14,
+      bottom: -14,
     },
     '&$focusVisible,&:hover': {
       boxShadow: `0px 0px 0px 8px ${fade(theme.palette.primary.main, 0.16)}`,
@@ -317,12 +318,12 @@ export const styles = theme => ({
     ...theme.typography.body2,
     color: theme.palette.text.secondary,
     position: 'absolute',
-    top: 22,
+    top: 26,
     transform: 'translateX(-50%)',
     whiteSpace: 'nowrap',
     '$vertical &': {
       top: 'auto',
-      left: 22,
+      left: 26,
       transform: 'translateY(50%)',
     },
     '@media (pointer: coarse)': {

From 68d5c5e4bf66593ac7ba7466fb9a2bca84fbb752 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 18 Nov 2019 14:55:04 +0100
Subject: [PATCH 2/2] Increase thumb area by 2px

---
 packages/material-ui/src/Slider/Slider.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js
index 7ca8b7ba89bef3..a359c2ce4911c3 100644
--- a/packages/material-ui/src/Slider/Slider.js
+++ b/packages/material-ui/src/Slider/Slider.js
@@ -248,11 +248,11 @@ export const styles = theme => ({
       position: 'absolute',
       content: '""',
       borderRadius: '50%',
-      // x10 thumb surface (from 12px^2 to 40px^2).
-      left: -14,
-      top: -14,
-      right: -14,
-      bottom: -14,
+      // reach 42px hit target (2 * 15 + thumb diameter)
+      left: -15,
+      top: -15,
+      right: -15,
+      bottom: -15,
     },
     '&$focusVisible,&:hover': {
       boxShadow: `0px 0px 0px 8px ${fade(theme.palette.primary.main, 0.16)}`,