@mui/material 9.0.0-beta.1 → 9.0.0

package/Slider/useSlider.mjs

@@ -11,35 +11,45 @@ import visuallyHidden from '@mui/utils/visuallyHidden';
 import clamp from '@mui/utils/clamp';
 import extractEventHandlers from '@mui/utils/extractEventHandlers';
 import areArraysEqual from "../utils/areArraysEqual.mjs";
+import getActiveElement from "../utils/getActiveElement.mjs";
 const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
+const EMPTY_MARKS = [];
+const EMPTY_OBJ = {};
 function getNewValue(currentValue, step, direction, min, max) {
   return direction === 1 ? Math.min(currentValue + step, max) : Math.max(currentValue - step, min);
 }
 function asc(a, b) {
   return a - b;
 }
-function findClosest(values, currentValue) {
-  const {
-    index: closestIndex
-  } = values.reduce((acc, value, index) => {
+function findClosest(values, currentValue, preferredIndex = -1) {
+  const closestValue = values.reduce((acc, value, index) => {
     const distance = Math.abs(currentValue - value);
-    if (acc === null || distance < acc.distance || distance === acc.distance) {
+    if (acc == null || distance <= acc.distance) {
       return {
         distance,
         index
       };
     }
     return acc;
-  }, null) ?? {};
+  }, null) ?? EMPTY_OBJ;
+  const {
+    index: closestIndex
+  } = closestValue;
+  if (closestIndex == null) {
+    return closestIndex;
+  }
+  if (preferredIndex >= 0 && values[preferredIndex] === values[closestIndex]) {
+    return preferredIndex;
+  }
   return closestIndex;
 }
-function trackFinger(event, touchId) {
+function trackFinger(event, touchIdRef) {
   // The event is TouchEvent
-  if (touchId.current !== undefined && event.changedTouches) {
+  if (touchIdRef.current != null && event.changedTouches) {
     const touchEvent = event;
     for (let i = 0; i < touchEvent.changedTouches.length; i += 1) {
       const touch = touchEvent.changedTouches[i];
-      if (touch.identifier === touchId.current) {
+      if (touch.identifier === touchIdRef.current) {
         return {
           x: touch.clientX,
           y: touch.clientY
@@ -49,7 +59,7 @@ function trackFinger(event, touchId) {
     return false;
   }
 
-  // The event is MouseEvent
+  // The event is PointerEvent or MouseEvent
   return {
     x: event.clientX,
     y: event.clientY
@@ -76,26 +86,18 @@ function roundValueToStep(value, step, min) {
   const nearest = Math.round((value - min) / step) * step + min;
   return Number(nearest.toFixed(getDecimalPrecision(step)));
 }
-function setValueIndex({
-  values,
-  newValue,
-  index
-}) {
+function setValueIndex(values, newValue, index) {
   const output = values.slice();
   output[index] = newValue;
   return output.sort(asc);
 }
-function focusThumb({
-  sliderRef,
-  activeIndex,
-  setActive,
-  focusVisible
-}) {
+function focusThumb(sliderRef, activeIndex, setActive, focusVisible) {
   const doc = ownerDocument(sliderRef.current);
-  if (!sliderRef.current?.contains(doc.activeElement) || Number(doc?.activeElement?.getAttribute('data-index')) !== activeIndex) {
+  const activeElement = getActiveElement(doc);
+  if (!sliderRef.current?.contains(activeElement) || Number(activeElement?.getAttribute('data-index')) !== activeIndex) {
     const input = sliderRef.current?.querySelector(`[type="range"][data-index="${activeIndex}"]`);
     if (input != null) {
-      if (focusVisible === undefined) {
+      if (focusVisible == null) {
         input.focus({
           preventScroll: true
         });
@@ -104,7 +106,7 @@ function focusThumb({
           preventScroll: true,
           // Prevent pointer-driven focus rings in browsers that support this option.
           // Chrome 144+ supports `focusVisible` in `HTMLElement.focus()` options.
-          // @ts-ignore - `focusVisible` is not yet in TypeScript's lib.dom FocusOptions.
+          // @ts-expect-error `focusVisible` is not yet in TypeScript's lib.dom FocusOptions.
           focusVisible
         });
       }
@@ -150,28 +152,6 @@ const axisProps = {
   }
 };
 export const Identity = x => x;
-
-// TODO: remove support for Safari < 13.
-// https://caniuse.com/#search=touch-action
-//
-// Safari, on iOS, supports touch action since v13.
-// Over 80% of the iOS phones are compatible
-// in August 2020.
-// Utilizing the CSS.supports method to check if touch-action is supported.
-// Since CSS.supports is supported on all but Edge@12 and IE and touch-action
-// is supported on both Edge@12 and IE if CSS.supports is not available that means that
-// touch-action will be supported
-let cachedSupportsTouchActionNone;
-function doesSupportTouchActionNone() {
-  if (cachedSupportsTouchActionNone === undefined) {
-    if (typeof CSS !== 'undefined' && typeof CSS.supports === 'function') {
-      cachedSupportsTouchActionNone = CSS.supports('touch-action', 'none');
-    } else {
-      cachedSupportsTouchActionNone = true;
-    }
-  }
-  return cachedSupportsTouchActionNone;
-}
 export function useSlider(parameters) {
   const {
     'aria-labelledby': ariaLabelledby,
@@ -193,35 +173,42 @@ export function useSlider(parameters) {
     tabIndex,
     value: valueProp
   } = parameters;
-  const touchId = React.useRef(undefined);
-  const focusFrame = React.useRef(null);
+  const touchIdRef = React.useRef(undefined);
+  const focusFrameRef = React.useRef(null);
   // We can't use the :active browser pseudo-classes.
   // - The active state isn't triggered when clicking on the rail.
   // - The active state isn't transferred when inversing a range slider.
   const [active, setActive] = React.useState(-1);
   const [open, setOpen] = React.useState(-1);
   const [dragging, setDragging] = React.useState(false);
-  const moveCount = React.useRef(0);
+  const moveCountRef = React.useRef(0);
+  // Ref (not state) because setActive() always accompanies updates, providing the re-render.
+  const lastUsedThumbIndexRef = React.useRef(-1);
+  // Prevents duplicate listener registration when both pointer and touch events fire
+  // for the same physical touch interaction.
+  const pointerDownHandledRef = React.useRef(false);
+  // Tracks which pointer owns the current drag session, so stray pointerup/pointermove
+  // events from a second pointer don't interfere.
+  const activePointerIdRef = React.useRef(-1);
   const cancelFocusFrame = useEventCallback(() => {
-    if (focusFrame.current != null) {
-      cancelAnimationFrame(focusFrame.current);
-      focusFrame.current = null;
+    if (focusFrameRef.current != null) {
+      cancelAnimationFrame(focusFrameRef.current);
+      focusFrameRef.current = null;
     }
   });
-  // lastChangedValue is updated whenever onChange is triggered.
-  const lastChangedValue = React.useRef(null);
+  // lastChangedValueRef is updated whenever onChange is triggered.
+  const lastChangedValueRef = React.useRef(null);
   const [valueDerived, setValueState] = useControlled({
     controlled: valueProp,
     default: defaultValue ?? min,
     name: 'Slider'
   });
-  const handleChange = onChange && ((event, value, thumbIndex) => {
+  const handleChange = useEventCallback((event, value, thumbIndex) => {
     // Redefine target to allow name and value to be read.
     // This allows seamless integration with the most popular form libraries.
     // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
     // Clone the event to not override `target` of the original event.
-    const nativeEvent = event.nativeEvent || event;
-    // @ts-ignore The nativeEvent is function, not object
+    const nativeEvent = 'nativeEvent' in event ? event.nativeEvent : event;
     const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
     Object.defineProperty(clonedEvent, 'target', {
       writable: true,
@@ -230,16 +217,43 @@ export function useSlider(parameters) {
         name
       }
     });
-    lastChangedValue.current = value;
-    onChange(clonedEvent, value, thumbIndex);
+    lastChangedValueRef.current = value;
+    onChange?.(clonedEvent, value, thumbIndex);
   });
   const range = Array.isArray(valueDerived);
-  let values = range ? valueDerived.slice().sort(asc) : [valueDerived];
-  values = values.map(value => value == null ? min : clamp(value, min, max));
-  const marks = marksProp === true && step !== null ? [...Array(Math.floor((max - min) / step) + 1)].map((_, index) => ({
-    value: min + step * index
-  })) : marksProp || [];
-  const marksValues = marks.map(mark => mark.value);
+  const values = React.useMemo(() => {
+    if (typeof valueDerived === 'number') {
+      return [clamp(valueDerived, min, max)];
+    }
+    if (valueDerived == null) {
+      return [min];
+    }
+    const sortedValues = valueDerived.slice().sort(asc);
+    for (let i = 0; i < sortedValues.length; i += 1) {
+      const value = sortedValues[i];
+      sortedValues[i] = value == null ? min : clamp(value, min, max);
+    }
+    return sortedValues;
+  }, [valueDerived, min, max]);
+  const marks = React.useMemo(() => {
+    if (marksProp === true && step != null) {
+      const generatedMarks = new Array(Math.floor((max - min) / step) + 1);
+      for (let i = 0; i < generatedMarks.length; i += 1) {
+        generatedMarks[i] = {
+          value: min + step * i
+        };
+      }
+      return generatedMarks;
+    }
+    return Array.isArray(marksProp) ? marksProp : EMPTY_MARKS;
+  }, [marksProp, step, min, max]);
+  const marksValues = React.useMemo(() => {
+    const markValues = new Array(marks.length);
+    for (let i = 0; i < marks.length; i += 1) {
+      markValues[i] = marks[i].value;
+    }
+    return markValues;
+  }, [marks]);
   const [focusedThumbIndex, setFocusedThumbIndex] = React.useState(-1);
   const sliderRef = React.useRef(null);
   const handleRef = useForkRef(ref, sliderRef);
@@ -280,29 +294,22 @@ export function useSlider(parameters) {
         newValue = clamp(newValue, values[index - 1] || -Infinity, values[index + 1] || Infinity);
       }
       const previousValue = newValue;
-      newValue = setValueIndex({
-        values,
-        newValue,
-        index
-      });
+      newValue = setValueIndex(values, newValue, index);
       let activeIndex = index;
 
       // Potentially swap the index if needed.
       if (!disableSwap) {
         activeIndex = newValue.indexOf(previousValue);
       }
-      focusThumb({
-        sliderRef,
-        activeIndex
-      });
+      focusThumb(sliderRef, activeIndex);
     }
     setValueState(newValue);
     setFocusedThumbIndex(index);
-    if (handleChange && !areValuesEqual(newValue, valueDerived)) {
+    if (onChange && !areValuesEqual(newValue, valueDerived)) {
       handleChange(event, newValue, index);
     }
     if (onChangeCommitted) {
-      onChangeCommitted(event, lastChangedValue.current ?? newValue);
+      onChangeCommitted(event, lastChangedValueRef.current ?? newValue);
     }
   };
   const createHandleHiddenInputKeyDown = otherHandlers => event => {
@@ -370,12 +377,14 @@ export function useSlider(parameters) {
     otherHandlers?.onKeyDown?.(event);
   };
   useEnhancedEffect(() => {
-    if (disabled && sliderRef.current.contains(document.activeElement)) {
+    const activeElement = getActiveElement(ownerDocument(sliderRef.current));
+    if (disabled && sliderRef.current?.contains(activeElement)) {
       // This is necessary because Firefox and Safari will keep focus
       // on a disabled element:
       // https://codesandbox.io/p/sandbox/mui-pr-22247-forked-h151h?file=/src/App.js
-      // @ts-ignore
-      document.activeElement?.blur();
+      if (activeElement != null && 'blur' in activeElement) {
+        activeElement.blur();
+      }
     }
   }, [disabled]);
   if (disabled && active !== -1) {
@@ -386,22 +395,27 @@ export function useSlider(parameters) {
   }
   const createHandleHiddenInputChange = otherHandlers => event => {
     otherHandlers.onChange?.(event);
-    // this handles value change by Pointer or Touch events
-    // @ts-ignore
-    changeValue(event, event.target.valueAsNumber);
+    // Handles value changes reported through the hidden range input.
+    changeValue(event, event.currentTarget.valueAsNumber);
   };
-  const previousIndex = React.useRef(undefined);
+  const previousIndexRef = React.useRef(undefined);
   let axis = orientation;
   if (isRtl && orientation === 'horizontal') {
     axis += '-reverse';
   }
-  const getFingerNewValue = ({
-    finger,
-    move = false
-  }) => {
+
+  // Converts finger coordinates to a slider value and determines the active thumb.
+  // For range sliders, reads `previousIndexRef.current` to decide which thumb is active:
+  //   -1 = initial press → find closest thumb
+  //   ≥0 = drag in progress → keep same thumb
+  // Callers must reset `previousIndexRef.current = -1` before calling on a new interaction.
+  const getValueAtFinger = finger => {
     const {
       current: slider
     } = sliderRef;
+    if (!slider) {
+      return null;
+    }
     const {
       width,
       height,
@@ -428,27 +442,20 @@ export function useSlider(parameters) {
     newValue = clamp(newValue, min, max);
     let activeIndex = 0;
     if (range) {
-      if (!move) {
-        activeIndex = findClosest(values, newValue);
-      } else {
-        activeIndex = previousIndex.current;
-      }
+      const isDragging = previousIndexRef.current !== -1;
+      activeIndex = isDragging ? previousIndexRef.current : findClosest(values, newValue, lastUsedThumbIndexRef.current);
 
       // Bound the new value to the thumb's neighbours.
       if (disableSwap) {
         newValue = clamp(newValue, values[activeIndex - 1] || -Infinity, values[activeIndex + 1] || Infinity);
       }
       const previousValue = newValue;
-      newValue = setValueIndex({
-        values,
-        newValue,
-        index: activeIndex
-      });
+      newValue = setValueIndex(values, newValue, activeIndex);
 
       // Potentially swap the index if needed.
-      if (!(disableSwap && move)) {
+      if (!(disableSwap && isDragging)) {
         activeIndex = newValue.indexOf(previousValue);
-        previousIndex.current = activeIndex;
+        previousIndexRef.current = activeIndex;
       }
     }
     return {
@@ -457,60 +464,61 @@ export function useSlider(parameters) {
     };
   };
   const handleTouchMove = useEventCallback(nativeEvent => {
-    const finger = trackFinger(nativeEvent, touchId);
+    // Ignore pointer events from a different pointer than the one that started the drag.
+    if ('pointerId' in nativeEvent && nativeEvent.pointerId !== activePointerIdRef.current) {
+      return;
+    }
+    const finger = trackFinger(nativeEvent, touchIdRef);
     if (!finger) {
       return;
     }
-    moveCount.current += 1;
+    moveCountRef.current += 1;
 
-    // Cancel move in case some other element consumed a mouseup event and it was not fired.
-    // @ts-ignore buttons doesn't not exists on touch event
-    if (nativeEvent.type === 'mousemove' && nativeEvent.buttons === 0) {
+    // Cancel move in case some other element consumed a pointerup event and it was not fired.
+    if (nativeEvent.type === 'pointermove' && nativeEvent.buttons === 0) {
       // eslint-disable-next-line @typescript-eslint/no-use-before-define
       handleTouchEnd(nativeEvent);
       return;
     }
-    const {
-      newValue,
-      activeIndex
-    } = getFingerNewValue({
-      finger,
-      move: true
-    });
-    focusThumb({
-      sliderRef,
-      activeIndex,
-      setActive,
-      focusVisible: false
-    });
-    setValueState(newValue);
-    if (!dragging && moveCount.current > INTENTIONAL_DRAG_COUNT_THRESHOLD) {
+    const newFingerValue = getValueAtFinger(finger);
+    if (!newFingerValue) {
+      return;
+    }
+    focusThumb(sliderRef, newFingerValue.activeIndex, setActive, false);
+    lastUsedThumbIndexRef.current = newFingerValue.activeIndex;
+    setValueState(newFingerValue.newValue);
+    if (!dragging && moveCountRef.current > INTENTIONAL_DRAG_COUNT_THRESHOLD) {
       setDragging(true);
     }
-    if (handleChange && !areValuesEqual(newValue, valueDerived)) {
-      handleChange(nativeEvent, newValue, activeIndex);
+    if (onChange && !areValuesEqual(newFingerValue.newValue, valueDerived)) {
+      handleChange(nativeEvent, newFingerValue.newValue, newFingerValue.activeIndex);
     }
   });
   const handleTouchEnd = useEventCallback(nativeEvent => {
-    const finger = trackFinger(nativeEvent, touchId);
+    // Ignore pointer events from a different pointer than the one that started the drag.
+    if ('pointerId' in nativeEvent && nativeEvent.pointerId !== activePointerIdRef.current) {
+      return;
+    }
+    const finger = trackFinger(nativeEvent, touchIdRef);
     setDragging(false);
     if (!finger) {
       return;
     }
-    const {
-      newValue
-    } = getFingerNewValue({
-      finger,
-      move: true
-    });
+    const newFingerValue = getValueAtFinger(finger);
     setActive(-1);
     if (nativeEvent.type === 'touchend') {
       setOpen(-1);
     }
-    if (onChangeCommitted) {
-      onChangeCommitted(nativeEvent, lastChangedValue.current ?? newValue);
+    if (newFingerValue && onChangeCommitted) {
+      onChangeCommitted(nativeEvent, lastChangedValueRef.current ?? newFingerValue.newValue);
+    }
+
+    // Release pointer capture if applicable
+    if ('pointerType' in nativeEvent && sliderRef.current?.hasPointerCapture(nativeEvent.pointerId)) {
+      sliderRef.current.releasePointerCapture(nativeEvent.pointerId);
     }
-    touchId.current = undefined;
+    touchIdRef.current = undefined;
+    activePointerIdRef.current = -1;
 
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     stopListening();
@@ -519,35 +527,36 @@ export function useSlider(parameters) {
     if (disabled) {
       return;
     }
-    // If touch-action: none; is not supported we need to prevent the scroll manually.
-    if (!doesSupportTouchActionNone()) {
-      nativeEvent.preventDefault();
+
+    // If the pointer path already handled this interaction,
+    // only record the touch identifier and skip duplicate listener registration.
+    if (pointerDownHandledRef.current) {
+      pointerDownHandledRef.current = false;
+      const touch = nativeEvent.changedTouches[0];
+      if (touch != null) {
+        touchIdRef.current = touch.identifier;
+      }
+      return;
     }
     const touch = nativeEvent.changedTouches[0];
     if (touch != null) {
       // A number that uniquely identifies the current finger in the touch session.
-      touchId.current = touch.identifier;
+      touchIdRef.current = touch.identifier;
     }
-    const finger = trackFinger(nativeEvent, touchId);
+    const finger = trackFinger(nativeEvent, touchIdRef);
     if (finger !== false) {
-      const {
-        newValue,
-        activeIndex
-      } = getFingerNewValue({
-        finger
-      });
-      focusThumb({
-        sliderRef,
-        activeIndex,
-        setActive,
-        focusVisible: false
-      });
-      setValueState(newValue);
-      if (handleChange && !areValuesEqual(newValue, valueDerived)) {
-        handleChange(nativeEvent, newValue, activeIndex);
+      previousIndexRef.current = -1;
+      const newFingerValue = getValueAtFinger(finger);
+      if (newFingerValue) {
+        focusThumb(sliderRef, newFingerValue.activeIndex, setActive, false);
+        lastUsedThumbIndexRef.current = newFingerValue.activeIndex;
+        setValueState(newFingerValue.newValue);
+        if (onChange && !areValuesEqual(newFingerValue.newValue, valueDerived)) {
+          handleChange(nativeEvent, newFingerValue.newValue, newFingerValue.activeIndex);
+        }
       }
     }
-    moveCount.current = 0;
+    moveCountRef.current = 0;
     const doc = ownerDocument(sliderRef.current);
     doc.addEventListener('touchmove', handleTouchMove, {
       passive: true
@@ -558,17 +567,18 @@ export function useSlider(parameters) {
   });
   const stopListening = React.useCallback(() => {
     const doc = ownerDocument(sliderRef.current);
-    doc.removeEventListener('mousemove', handleTouchMove);
-    doc.removeEventListener('mouseup', handleTouchEnd);
+    doc.removeEventListener('pointermove', handleTouchMove);
+    doc.removeEventListener('pointerup', handleTouchEnd);
     doc.removeEventListener('touchmove', handleTouchMove);
     doc.removeEventListener('touchend', handleTouchEnd);
   }, [handleTouchEnd, handleTouchMove]);
   React.useEffect(() => {
-    const {
-      current: slider
-    } = sliderRef;
+    const slider = sliderRef.current;
+    if (!slider) {
+      return undefined;
+    }
     slider.addEventListener('touchstart', handleTouchStart, {
-      passive: doesSupportTouchActionNone()
+      passive: true
     });
     return () => {
       slider.removeEventListener('touchstart', handleTouchStart);
@@ -582,62 +592,67 @@ export function useSlider(parameters) {
       cancelFocusFrame();
     }
   }, [disabled, stopListening, cancelFocusFrame]);
-  const createHandleMouseDown = otherHandlers => event => {
-    otherHandlers.onMouseDown?.(event);
-    if (disabled) {
-      return;
-    }
-    if (event.defaultPrevented) {
-      return;
-    }
+  const createHandlePointerDown = otherHandlers => event => {
+    otherHandlers.onPointerDown?.(event);
 
-    // Only handle left clicks
-    if (event.button !== 0) {
+    // On touch devices, the browser fires both pointerdown and touchstart for the
+    // same physical touch. Mark this BEFORE early returns so handleTouchStart always
+    // knows the pointer path saw this interaction — even if it was prevented or disabled.
+    if (event.pointerType === 'touch') {
+      pointerDownHandledRef.current = true;
+    }
+    if (disabled || event.defaultPrevented || event.button !== 0) {
       return;
     }
-    const finger = trackFinger(event, touchId);
+    const finger = trackFinger(event, touchIdRef);
     if (finger !== false) {
-      const {
-        newValue,
-        activeIndex
-      } = getFingerNewValue({
-        finger
-      });
-      const doc = ownerDocument(sliderRef.current);
-      const activeElement = doc.activeElement;
-      const pressedOnFocusedThumb = sliderRef.current?.contains(activeElement) && Number(activeElement?.getAttribute('data-index')) === activeIndex;
-      setActive(activeIndex);
-      if (pressedOnFocusedThumb) {
-        event.preventDefault();
-      } else {
-        cancelFocusFrame();
-        focusFrame.current = requestAnimationFrame(() => {
-          focusFrame.current = null;
-          focusThumb({
-            sliderRef,
-            activeIndex,
-            focusVisible: false
+      previousIndexRef.current = -1;
+      const newFingerValue = getValueAtFinger(finger);
+      if (newFingerValue) {
+        const thumbInput = sliderRef.current?.querySelector(`input[type="range"][data-index="${newFingerValue.activeIndex}"]`);
+        const doc = ownerDocument(sliderRef.current);
+        const pressedOnFocusedThumb = thumbInput != null && thumbInput === getActiveElement(doc);
+        setActive(newFingerValue.activeIndex);
+        lastUsedThumbIndexRef.current = newFingerValue.activeIndex;
+        if (pressedOnFocusedThumb) {
+          event.preventDefault();
+        } else {
+          cancelFocusFrame();
+          focusFrameRef.current = requestAnimationFrame(() => {
+            focusFrameRef.current = null;
+            focusThumb(sliderRef, newFingerValue.activeIndex, undefined, false);
           });
-        });
-      }
-      setValueState(newValue);
-      if (handleChange && !areValuesEqual(newValue, valueDerived)) {
-        handleChange(event, newValue, activeIndex);
+        }
+        setValueState(newFingerValue.newValue);
+        if (onChange && !areValuesEqual(newFingerValue.newValue, valueDerived)) {
+          handleChange(event, newFingerValue.newValue, newFingerValue.activeIndex);
+        }
       }
     }
-    moveCount.current = 0;
+    moveCountRef.current = 0;
+    activePointerIdRef.current = event.pointerId;
     const doc = ownerDocument(sliderRef.current);
-    doc.addEventListener('mousemove', handleTouchMove, {
+
+    // Use pointer capture for reliable drag tracking
+    try {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    } catch {
+      // setPointerCapture can throw if the pointerId is invalid (e.g. synthetic
+      // events in tests, or the pointer was already released). The slider still
+      // works via document-level listeners; pointer capture is a progressive
+      // enhancement for reliable drag tracking.
+    }
+    doc.addEventListener('pointermove', handleTouchMove, {
       passive: true
     });
-    doc.addEventListener('mouseup', handleTouchEnd);
+    doc.addEventListener('pointerup', handleTouchEnd);
   };
   const trackOffset = valueToPercent(range ? values[0] : min, min, max);
   const trackLeap = valueToPercent(values[values.length - 1], min, max) - trackOffset;
-  const getRootProps = (externalProps = {}) => {
+  const getRootProps = (externalProps = EMPTY_OBJ) => {
     const externalHandlers = extractEventHandlers(externalProps);
     const ownEventHandlers = {
-      onMouseDown: createHandleMouseDown(externalHandlers || {})
+      onPointerDown: createHandlePointerDown(externalHandlers)
     };
     const mergedEventHandlers = {
       ...externalHandlers,
@@ -658,11 +673,11 @@ export function useSlider(parameters) {
     otherHandlers.onMouseLeave?.(event);
     setOpen(-1);
   };
-  const getThumbProps = (externalProps = {}) => {
+  const getThumbProps = (externalProps = EMPTY_OBJ) => {
     const externalHandlers = extractEventHandlers(externalProps);
     const ownEventHandlers = {
-      onMouseOver: createHandleMouseOver(externalHandlers || {}),
-      onMouseLeave: createHandleMouseLeave(externalHandlers || {})
+      onMouseOver: createHandleMouseOver(externalHandlers),
+      onMouseLeave: createHandleMouseLeave(externalHandlers)
     };
     return {
       ...externalProps,
@@ -671,22 +686,33 @@ export function useSlider(parameters) {
     };
   };
   const getThumbStyle = index => {
+    let zIndex;
+    if (range) {
+      if (active === index) {
+        zIndex = 2;
+      } else if (lastUsedThumbIndexRef.current === index) {
+        zIndex = 1;
+      }
+    } else if (active === index) {
+      zIndex = 1;
+    }
     return {
       // So the non active thumb doesn't show its label on hover.
-      pointerEvents: active !== -1 && active !== index ? 'none' : undefined
+      pointerEvents: active !== -1 && active !== index ? 'none' : undefined,
+      zIndex
     };
   };
   let cssWritingMode;
   if (orientation === 'vertical') {
     cssWritingMode = isRtl ? 'vertical-rl' : 'vertical-lr';
   }
-  const getHiddenInputProps = (externalProps = {}) => {
+  const getHiddenInputProps = (externalProps = EMPTY_OBJ) => {
     const externalHandlers = extractEventHandlers(externalProps);
     const ownEventHandlers = {
-      onChange: createHandleHiddenInputChange(externalHandlers || {}),
-      onFocus: createHandleHiddenInputFocus(externalHandlers || {}),
-      onBlur: createHandleHiddenInputBlur(externalHandlers || {}),
-      onKeyDown: createHandleHiddenInputKeyDown(externalHandlers || {})
+      onChange: createHandleHiddenInputChange(externalHandlers),
+      onFocus: createHandleHiddenInputFocus(externalHandlers),
+      onBlur: createHandleHiddenInputBlur(externalHandlers),
+      onKeyDown: createHandleHiddenInputKeyDown(externalHandlers)
     };
     const mergedEventHandlers = {
       ...externalHandlers,
@@ -725,7 +751,7 @@ export function useSlider(parameters) {
     getHiddenInputProps,
     getRootProps,
     getThumbProps,
-    marks: marks,
+    marks,
     open,
     range,
     rootRef: handleRef,