[joy-ui][slider] Slider is draggable beyond bounds (touch)

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://mui.com/joy-ui/react-slider/

Steps:

1. open example
2. scroll to first example
3. open dev tools with touch
4. drag ouside the bounds of root

Current behavior 😯

On touch devices the dragging of the slider works far beyond the root element.

Screenshot: the gaps either drag the upper or lower slider

If an interactive element is in the gap, the behavior is as expected

Screencast

https://github.com/mui/material-ui/assets/1148334/131104b7-b517-4da1-9536-b173e56b0a06

https://github.com/mui/material-ui/assets/1148334/d22467f1-6572-472f-a364-3b34f1f2a027

Expected behavior 🤔

I expect to be able do click on an area outside the slider bounds without triggering the slider itself, so that I can perform actions like scrolling.

Context 🔦

I have a page with several slider stacked in a box. I want to scroll the page on mobile, but it is impossible because each slider is somehow blocking me and triggering the slider instead of scrolling.

This breaks my UI/UX.

Your environment 🌎

  System:
    OS: Windows 10 10.0.22621
  Binaries:
    Node: 18.5.0 - C:\Program Files\nodejs\node.EXE
    @emotion/styled: 11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.17
    @mui/core-downloads-tracker:  5.14.12
    @mui/icons-material: 5.14.11 => 5.14.11
    @mui/joy: 5.0.0-beta.9 => 5.0.0-beta.9
    @mui/material: ^5.14.11 => 5.14.11
    @mui/private-theming:  5.14.12
    @mui/styled-engine:  5.14.12
    @mui/system:  5.14.12
    @mui/types:  7.2.5
    @mui/utils:  5.14.12
    @types/react: ^18.2.23 => 18.2.23
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: ^5.2.2 => 5.2.2

Start with the Joy UI React Slider live example at https://mui.com/joy-ui/react-slider/ and reproduce the touch behavior described with dev tools. The fix is complete when dragging or clicking outside the slider root no longer triggers either slider and page scrolling remains possible on touch devices.