[Slider] Improve UX for pointing device with limited accuracy

[oliviertassinari]

The problem: from time to time when we try to interact with the slider on mobile, we have to give multiple tries, until our finger actually touches the rail DOM node.

The changes aim to find a tradeoff between:

• Provide a tall enough interaction zone (e.g. to account for the size of a finger)
• Provide a small enough interaction zone (e.g. to avoid unintended interactions with a too tall interaction zone or not to "waste" space on the screen)
• Avoid overlapping other interactive elements (predictability)
• Override simplicity

[eps1lon]

This is an alternative solution to #18074. It aims to find a tradeoff between:

It is not an alternative as was extensively described in the original PR. Could you make an argument for each of these statements?

[oliviertassinari]

It is not an alternative as was extensively described in the original PR.

I don't understand your point. From what I understand #18174 and #18074 try to solve the same problem: from time to time when we try to interact with the slider on mobile, we have to give multiple tries, until our finger actually touches the rail DOM node.

Could you make an argument for each of these statements?

Do you mean, why are these dimensions important?

[mui-pr-bot]

Details of bundle changes.

Comparing: 3e25d1b...e33b92e

bundle	Size Change	Size	Gzip Change	Gzip
@material-ui/core	▲ +78 B (+0.02% )	349 kB	▲ +27 B (+0.03% )	95.5 kB
Slider	▲ +78 B (+0.11% )	73.8 kB	▲ +26 B (+0.11% )	23.3 kB
@material-ui/core[umd]	▲ +78 B (+0.03% )	308 kB	▲ +24 B (+0.03% )	88.8 kB
@material-ui/lab	--	169 kB	--	50.7 kB
@material-ui/styles	--	50.8 kB	--	15.4 kB
@material-ui/system	--	14.8 kB	--	4.06 kB
AppBar	--	62.2 kB	--	19.5 kB
Autocomplete	--	125 kB	--	39.5 kB
Avatar	--	61.2 kB	--	19.2 kB
Backdrop	--	66.2 kB	--	20.4 kB
Badge	--	63.8 kB	--	19.7 kB
BottomNavigation	--	60.8 kB	--	19 kB
BottomNavigationAction	--	73.8 kB	--	23.3 kB
Box	--	69.2 kB	--	20.9 kB
Breadcrumbs	--	66.4 kB	--	20.8 kB
Button	--	77.8 kB	--	24.1 kB
ButtonBase	--	72.3 kB	--	22.6 kB
ButtonGroup	--	62.7 kB	--	19.5 kB
Card	--	61.2 kB	--	19.1 kB
CardActionArea	--	73.3 kB	--	23.1 kB
CardActions	--	60.5 kB	--	18.9 kB
CardContent	--	60.4 kB	--	18.9 kB
CardHeader	--	63.5 kB	--	20 kB
CardMedia	--	60.8 kB	--	19.1 kB
Checkbox	--	80 kB	--	25.1 kB
Chip	--	81 kB	--	24.7 kB
CircularProgress	--	62.5 kB	--	19.7 kB
ClickAwayListener	--	3.85 kB	--	1.55 kB
Collapse	--	66.3 kB	--	20.5 kB
colorManipulator	--	3.83 kB	--	1.52 kB
Container	--	61.6 kB	--	19.2 kB
CssBaseline	--	56 kB	--	17.5 kB
Dialog	--	80.9 kB	--	25.1 kB
DialogActions	--	60.5 kB	--	18.9 kB
DialogContent	--	60.7 kB	--	19 kB
DialogContentText	--	62.5 kB	--	19.6 kB
DialogTitle	--	62.7 kB	--	19.7 kB
Divider	--	61 kB	--	19.1 kB
docs.landing	--	55.6 kB	--	14.6 kB
docs.main	--	602 kB	--	192 kB
Drawer	--	82.7 kB	--	25.6 kB
ExpansionPanel	--	69.7 kB	--	21.7 kB
ExpansionPanelActions	--	60.5 kB	--	18.9 kB
ExpansionPanelDetails	--	60.4 kB	--	18.9 kB
ExpansionPanelSummary	--	76.4 kB	--	24.1 kB
Fab	--	75.1 kB	--	23.3 kB
Fade	--	22 kB	--	7.6 kB
FilledInput	--	72 kB	--	22.3 kB
FormControl	--	62.8 kB	--	19.5 kB
FormControlLabel	--	64 kB	--	20.1 kB
FormGroup	--	60.5 kB	--	18.9 kB
FormHelperText	--	61.7 kB	--	19.3 kB
FormLabel	--	61.9 kB	--	19.1 kB
Grid	--	63.5 kB	--	19.9 kB
GridList	--	60.9 kB	--	19.1 kB
GridListTile	--	62.2 kB	--	19.5 kB
GridListTileBar	--	61.7 kB	--	19.3 kB
Grow	--	22.6 kB	--	7.72 kB
Hidden	--	64.5 kB	--	20.2 kB
Icon	--	61.2 kB	--	19.2 kB
IconButton	--	74.4 kB	--	23.2 kB
Input	--	70.9 kB	--	22.1 kB
InputAdornment	--	63.5 kB	--	20 kB
InputBase	--	69.1 kB	--	21.6 kB
InputLabel	--	63.8 kB	--	19.8 kB
LinearProgress	--	63.8 kB	--	19.9 kB
Link	--	65 kB	--	20.6 kB
List	--	60.8 kB	--	18.9 kB
ListItem	--	75.4 kB	--	23.5 kB
ListItemAvatar	--	60.6 kB	--	18.9 kB
ListItemIcon	--	60.6 kB	--	19 kB
ListItemSecondaryAction	--	60.5 kB	--	18.9 kB
ListItemText	--	63.4 kB	--	19.9 kB
ListSubheader	--	61.2 kB	--	19.2 kB
Menu	--	86.6 kB	--	27.2 kB
MenuItem	--	76.4 kB	--	23.8 kB
MenuList	--	64.4 kB	--	20.1 kB
MobileStepper	--	66.2 kB	--	20.6 kB
Modal	--	14.2 kB	--	4.96 kB
NativeSelect	--	75.2 kB	--	23.7 kB
NoSsr	--	2.19 kB	--	1.04 kB
OutlinedInput	--	72.5 kB	--	22.5 kB
Paper	--	60.7 kB	--	18.9 kB
Popover	--	81 kB	--	25 kB
Popper	--	28.5 kB	--	10.2 kB
Portal	--	2.87 kB	--	1.29 kB
Radio	--	80.9 kB	--	25.4 kB
RadioGroup	--	61.7 kB	--	19.3 kB
Rating	--	68.3 kB	--	21.8 kB
RootRef	--	4.43 kB	--	1.67 kB
Select	--	112 kB	--	33.4 kB
Skeleton	--	60.9 kB	--	19.1 kB
Slide	--	24.1 kB	--	8.21 kB
Snackbar	--	75.6 kB	--	23.5 kB
SnackbarContent	--	64.1 kB	--	20.1 kB
SpeedDial	--	84.3 kB	--	26.5 kB
SpeedDialAction	--	114 kB	--	36 kB
SpeedDialIcon	--	63 kB	--	19.8 kB
Step	--	61.1 kB	--	19.1 kB
StepButton	--	80.6 kB	--	25.3 kB
StepConnector	--	61.2 kB	--	19.2 kB
StepContent	--	67.4 kB	--	21 kB
StepIcon	--	63.1 kB	--	19.6 kB
StepLabel	--	67 kB	--	21 kB
Stepper	--	63.2 kB	--	19.9 kB
styles/createMuiTheme	--	15.2 kB	--	5.36 kB
SvgIcon	--	61.5 kB	--	19.1 kB
SwipeableDrawer	--	90.1 kB	--	27.9 kB
Switch	--	79.3 kB	--	24.7 kB
Tab	--	74.6 kB	--	23.6 kB
Table	--	61 kB	--	19.1 kB
TableBody	--	60.5 kB	--	18.9 kB
TableCell	--	62.5 kB	--	19.6 kB
TableFooter	--	60.6 kB	--	18.9 kB
TableHead	--	60.6 kB	--	18.9 kB
TablePagination	--	139 kB	--	40.5 kB
TableRow	--	61 kB	--	19.1 kB
TableSortLabel	--	75.6 kB	--	23.9 kB
Tabs	--	83.7 kB	--	26.6 kB
TextareaAutosize	--	5.06 kB	--	2.11 kB
TextField	--	121 kB	--	35.4 kB
ToggleButton	--	74.4 kB	--	23.5 kB
ToggleButtonGroup	--	61.6 kB	--	19.4 kB
Toolbar	--	60.8 kB	--	19 kB
Tooltip	--	97.7 kB	--	30.9 kB
TreeItem	--	71.9 kB	--	22.6 kB
TreeView	--	64.8 kB	--	20.2 kB
Typography	--	62.1 kB	--	19.3 kB
useAutocomplete	--	11.2 kB	--	4.22 kB
useMediaQuery	--	2.49 kB	--	1.05 kB
Zoom	--	22.1 kB	--	7.6 kB

Generated by 🚫 dangerJS against e33b92e

[eps1lon]

Do you mean, why are these dimensions are important?

How are these addressed or apply here.

I don't understand your point.

I even made a video. I can't help you more without physically pointing the pointer for you. Nothing in my PR talks about mobile.

[oliviertassinari]

@eps1lon Oh, I think that I understand your point now, I was confused by the 48px touch target, for touch devices and the recording on a pointer device (the 7mm - 9mm recommendation of Google Material Design only applies to touch devices, right?) and the mention to a regression with v3.

So these two pull requests solve two different problems. #18074 is about increasing the thumb interaction zone from this zone on desktop:

to this zone:

Thanks for the patience, it took me some time to understand.

[eps1lon]

Yes I shouldn't have used this term. I just wanted to explain where the size comes from which lead to the misunderstanding that this targets mobile devices.

[oliviertassinari]

@eps1lon Ok awesome, sounds like a great change 👍.