@base-ui/react 1.6.0 → 1.7.0

package/slider/control/SliderControl.js

@@ -90,7 +90,6 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
     minStepsBetweenValues,
     onValueCommitted,
     orientation,
-    pressedInputRef,
     pressedThumbCenterOffsetRef,
     pressedThumbIndexRef,
     pressedValuesRef,
@@ -125,22 +124,18 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
   const insetThumbOffsetRef = React.useRef(0);
   const currentInteractionValueRef = React.useRef(null);
   const latestValuesRef = (0, _useValueAsRef.useValueAsRef)(values);
+  function getThumbInput(el) {
+    return el?.querySelector('input[type="range"]');
+  }
   function updatePressedThumb(nextIndex) {
-    if (pressedThumbIndexRef.current !== nextIndex) {
-      pressedThumbIndexRef.current = nextIndex;
-    }
-    const thumbElement = thumbRefs.current[nextIndex];
-    if (!thumbElement) {
+    pressedThumbIndexRef.current = nextIndex;
+    if (!thumbRefs.current[nextIndex]) {
       pressedThumbCenterOffsetRef.current = null;
-      pressedInputRef.current = null;
-      return;
     }
-    pressedInputRef.current = thumbElement.querySelector('input[type="range"]');
   }
   function resetPressedThumb() {
     pressedThumbIndexRef.current = -1;
     pressedThumbCenterOffsetRef.current = null;
-    pressedInputRef.current = null;
   }
   function isTargetDisabledThumb(target) {
     if (!(0, _dom.isElement)(target)) {
@@ -150,13 +145,16 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
       if (!(0, _dom.isElement)(thumbEl) || !(0, _utils.contains)(thumbEl, target)) {
         return false;
       }
-      return thumbEl.querySelector('input[type="range"]')?.disabled === true;
+      return getThumbInput(thumbEl)?.disabled === true;
     });
   }
   function getFingerState(fingerCoords) {
     const control = controlRef.current;
     const thumbIndex = pressedThumbIndexRef.current;
-    if (!control || !range && (thumbIndex < 0 || thumbIndex >= values.length)) {
+    if (!control || thumbIndex < 0 || thumbIndex >= values.length) {
+      if (thumbIndex >= values.length) {
+        currentInteractionValueRef.current = null;
+      }
       return null;
     }
     const {
@@ -185,22 +183,7 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
         didSwap: false
       };
     }
-    if (thumbIndex < 0) {
-      return null;
-    }
-    const collisionResult = (0, _resolveThumbCollision.resolveThumbCollision)({
-      behavior: thumbCollisionBehavior,
-      values,
-      currentValues: latestValuesRef.current ?? values,
-      initialValues: pressedValuesRef.current,
-      pressedIndex: thumbIndex,
-      nextValue: newValue,
-      min,
-      max,
-      step,
-      minStepsBetweenValues
-    });
-    return collisionResult;
+    return (0, _resolveThumbCollision.resolveThumbCollision)(thumbCollisionBehavior, values, latestValuesRef.current, pressedValuesRef.current, thumbIndex, newValue, min, max, step, minStepsBetweenValues);
   }
   function startPressing(fingerCoords) {
     pressedValuesRef.current = range ? values.slice() : null;
@@ -223,9 +206,9 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
       closestThumbIndex = -1;
       for (let i = 0; i < thumbRefs.current.length; i += 1) {
         const thumbEl = thumbRefs.current[i];
-        if ((0, _dom.isElement)(thumbEl) && !thumbEl.querySelector('input[type="range"]')?.disabled) {
-          const midpoint = (0, _getMidpoint.getMidpoint)(thumbEl);
-          const distance = Math.abs(fingerCoords[axis] - midpoint[axis]);
+        if ((0, _dom.isElement)(thumbEl) && !getThumbInput(thumbEl)?.disabled) {
+          const midpoint = (0, _getMidpoint.getMidpoint)(thumbEl, vertical);
+          const distance = Math.abs(fingerCoords[axis] - midpoint);
           if (minDistance === undefined || distance <= minDistance) {
             closestThumbIndex = i;
             minDistance = distance;
@@ -246,7 +229,7 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
     }
   }
   function focusThumb(thumbIndex) {
-    const input = thumbRefs.current?.[thumbIndex]?.querySelector('input[type="range"]');
+    const input = getThumbInput(thumbRefs.current?.[thumbIndex]);
     if (!input) {
       return;
     }
@@ -265,10 +248,11 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
       currentInteractionValueRef.current = finger.value;
       latestValuesRef.current = Array.isArray(finger.value) ? finger.value : [finger.value];
 
-      // Only track the swapped thumb once the change is actually applied so a
+      // Only track and focus the swapped thumb once the change is actually applied so a
       // canceled swap doesn't leak the new index into subsequent moves.
       if (finger.didSwap) {
         updatePressedThumb(finger.thumbIndex);
+        focusThumb(finger.thumbIndex);
       }
     }
     return applied;
@@ -294,17 +278,21 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
       if (!dragging && moveCountRef.current > INTENTIONAL_DRAG_COUNT_THRESHOLD) {
         setDragging(true);
       }
-      const applied = setValueFromPointer(finger, _reasons.REASONS.drag, nativeEvent);
-      if (applied && finger.didSwap) {
-        focusThumb(finger.thumbIndex);
-      }
+      setValueFromPointer(finger, _reasons.REASONS.drag, nativeEvent);
     }
   });
   const handleTouchEnd = (0, _useStableCallback.useStableCallback)(nativeEvent => {
     setActive(-1);
     setDragging(false);
-    pressedInputRef.current = null;
     pressedThumbCenterOffsetRef.current = null;
+
+    // If the value array shrank or grew mid-drag, the cached interaction value no longer
+    // matches the current thumbs (the pressed index can still be in range), so dropping it
+    // keeps a stale or malformed array from being committed on release.
+    const interactionValue = currentInteractionValueRef.current;
+    if (Array.isArray(interactionValue) && interactionValue.length !== values.length) {
+      currentInteractionValueRef.current = null;
+    }
     if (currentInteractionValueRef.current != null) {
       const commitReason = lastChangeReasonRef.current;
       onValueCommitted(currentInteractionValueRef.current, (0, _createBaseUIEventDetails.createGenericEventDetails)(commitReason, nativeEvent));
@@ -314,8 +302,6 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
     }
     pressedThumbIndexRef.current = -1;
     touchIdRef.current = null;
-    pressedValuesRef.current = null;
-    currentInteractionValueRef.current = null;
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     stopListening();
   });
@@ -328,22 +314,21 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
       return;
     }
     const touch = nativeEvent.changedTouches[0];
-    if (touch != null) {
-      touchIdRef.current = touch.identifier;
+    if (touch == null) {
+      return;
     }
-    const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);
-    if (fingerCoords != null) {
-      startPressing(fingerCoords);
-      const finger = getFingerState(fingerCoords);
-      if (finger == null) {
-        return;
-      }
-      focusThumb(finger.thumbIndex);
-      const applied = setValueFromPointer(finger, _reasons.REASONS.trackPress, nativeEvent);
-      if (applied && finger.didSwap) {
-        focusThumb(finger.thumbIndex);
-      }
+    touchIdRef.current = touch.identifier;
+    const fingerCoords = {
+      x: touch.clientX,
+      y: touch.clientY
+    };
+    startPressing(fingerCoords);
+    const finger = getFingerState(fingerCoords);
+    if (finger == null) {
+      return;
     }
+    focusThumb(finger.thumbIndex);
+    setValueFromPointer(finger, _reasons.REASONS.trackPress, nativeEvent);
     moveCountRef.current = 0;
     const doc = (0, _owner.ownerDocument)(controlRef.current);
     doc.addEventListener('touchmove', handleTouchMove, {
@@ -399,35 +384,33 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
           resetPressedThumb();
           return;
         }
-        const fingerCoords = getFingerCoords(event, touchIdRef);
-        if (fingerCoords != null) {
-          startPressing(fingerCoords);
-          const finger = getFingerState(fingerCoords);
-          if (finger == null) {
-            return;
-          }
-          const pressedOnFocusedThumb = (0, _utils.contains)(thumbRefs.current[finger.thumbIndex], (0, _utils.activeElement)((0, _owner.ownerDocument)(control)));
-          if (pressedOnFocusedThumb) {
-            event.preventDefault();
-          } else {
-            focusFrame.request(() => {
-              focusThumb(finger.thumbIndex);
-            });
-          }
-          setDragging(true);
-          const pressedOnAnyThumb = pressedThumbCenterOffsetRef.current != null;
-          if (!pressedOnAnyThumb) {
-            const applied = setValueFromPointer(finger, _reasons.REASONS.trackPress, event.nativeEvent);
-            if (applied && finger.didSwap) {
-              focusThumb(finger.thumbIndex);
-            }
-          }
+        const fingerCoords = {
+          x: event.clientX,
+          y: event.clientY
+        };
+        startPressing(fingerCoords);
+        const finger = getFingerState(fingerCoords);
+        if (finger == null) {
+          return;
+        }
+        const pressedOnFocusedThumb = (0, _utils.contains)(thumbRefs.current[finger.thumbIndex], (0, _utils.activeElement)((0, _owner.ownerDocument)(control)));
+        if (pressedOnFocusedThumb) {
+          event.preventDefault();
+        } else {
+          focusFrame.request(() => {
+            focusThumb(finger.thumbIndex);
+          });
+        }
+        setDragging(true);
+        const pressedOnAnyThumb = pressedThumbCenterOffsetRef.current != null;
+        if (!pressedOnAnyThumb) {
+          setValueFromPointer(finger, _reasons.REASONS.trackPress, event.nativeEvent);
         }
         if (event.nativeEvent.pointerId) {
           control.setPointerCapture(event.nativeEvent.pointerId);
         }
         moveCountRef.current = 0;
-        const doc = (0, _owner.ownerDocument)(controlRef.current);
+        const doc = (0, _owner.ownerDocument)(control);
         doc.addEventListener('pointermove', handleTouchMove, {
           passive: true
         });

package/slider/control/SliderControl.mjs

@@ -84,7 +84,6 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
     minStepsBetweenValues,
     onValueCommitted,
     orientation,
-    pressedInputRef,
     pressedThumbCenterOffsetRef,
     pressedThumbIndexRef,
     pressedValuesRef,
@@ -119,22 +118,18 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
   const insetThumbOffsetRef = React.useRef(0);
   const currentInteractionValueRef = React.useRef(null);
   const latestValuesRef = useValueAsRef(values);
+  function getThumbInput(el) {
+    return el?.querySelector('input[type="range"]');
+  }
   function updatePressedThumb(nextIndex) {
-    if (pressedThumbIndexRef.current !== nextIndex) {
-      pressedThumbIndexRef.current = nextIndex;
-    }
-    const thumbElement = thumbRefs.current[nextIndex];
-    if (!thumbElement) {
+    pressedThumbIndexRef.current = nextIndex;
+    if (!thumbRefs.current[nextIndex]) {
       pressedThumbCenterOffsetRef.current = null;
-      pressedInputRef.current = null;
-      return;
     }
-    pressedInputRef.current = thumbElement.querySelector('input[type="range"]');
   }
   function resetPressedThumb() {
     pressedThumbIndexRef.current = -1;
     pressedThumbCenterOffsetRef.current = null;
-    pressedInputRef.current = null;
   }
   function isTargetDisabledThumb(target) {
     if (!isElement(target)) {
@@ -144,13 +139,16 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
       if (!isElement(thumbEl) || !contains(thumbEl, target)) {
         return false;
       }
-      return thumbEl.querySelector('input[type="range"]')?.disabled === true;
+      return getThumbInput(thumbEl)?.disabled === true;
     });
   }
   function getFingerState(fingerCoords) {
     const control = controlRef.current;
     const thumbIndex = pressedThumbIndexRef.current;
-    if (!control || !range && (thumbIndex < 0 || thumbIndex >= values.length)) {
+    if (!control || thumbIndex < 0 || thumbIndex >= values.length) {
+      if (thumbIndex >= values.length) {
+        currentInteractionValueRef.current = null;
+      }
       return null;
     }
     const {
@@ -179,22 +177,7 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
         didSwap: false
       };
     }
-    if (thumbIndex < 0) {
-      return null;
-    }
-    const collisionResult = resolveThumbCollision({
-      behavior: thumbCollisionBehavior,
-      values,
-      currentValues: latestValuesRef.current ?? values,
-      initialValues: pressedValuesRef.current,
-      pressedIndex: thumbIndex,
-      nextValue: newValue,
-      min,
-      max,
-      step,
-      minStepsBetweenValues
-    });
-    return collisionResult;
+    return resolveThumbCollision(thumbCollisionBehavior, values, latestValuesRef.current, pressedValuesRef.current, thumbIndex, newValue, min, max, step, minStepsBetweenValues);
   }
   function startPressing(fingerCoords) {
     pressedValuesRef.current = range ? values.slice() : null;
@@ -217,9 +200,9 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
       closestThumbIndex = -1;
       for (let i = 0; i < thumbRefs.current.length; i += 1) {
         const thumbEl = thumbRefs.current[i];
-        if (isElement(thumbEl) && !thumbEl.querySelector('input[type="range"]')?.disabled) {
-          const midpoint = getMidpoint(thumbEl);
-          const distance = Math.abs(fingerCoords[axis] - midpoint[axis]);
+        if (isElement(thumbEl) && !getThumbInput(thumbEl)?.disabled) {
+          const midpoint = getMidpoint(thumbEl, vertical);
+          const distance = Math.abs(fingerCoords[axis] - midpoint);
           if (minDistance === undefined || distance <= minDistance) {
             closestThumbIndex = i;
             minDistance = distance;
@@ -240,7 +223,7 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
     }
   }
   function focusThumb(thumbIndex) {
-    const input = thumbRefs.current?.[thumbIndex]?.querySelector('input[type="range"]');
+    const input = getThumbInput(thumbRefs.current?.[thumbIndex]);
     if (!input) {
       return;
     }
@@ -259,10 +242,11 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
       currentInteractionValueRef.current = finger.value;
       latestValuesRef.current = Array.isArray(finger.value) ? finger.value : [finger.value];
 
-      // Only track the swapped thumb once the change is actually applied so a
+      // Only track and focus the swapped thumb once the change is actually applied so a
       // canceled swap doesn't leak the new index into subsequent moves.
       if (finger.didSwap) {
         updatePressedThumb(finger.thumbIndex);
+        focusThumb(finger.thumbIndex);
       }
     }
     return applied;
@@ -288,17 +272,21 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
       if (!dragging && moveCountRef.current > INTENTIONAL_DRAG_COUNT_THRESHOLD) {
         setDragging(true);
       }
-      const applied = setValueFromPointer(finger, REASONS.drag, nativeEvent);
-      if (applied && finger.didSwap) {
-        focusThumb(finger.thumbIndex);
-      }
+      setValueFromPointer(finger, REASONS.drag, nativeEvent);
     }
   });
   const handleTouchEnd = useStableCallback(nativeEvent => {
     setActive(-1);
     setDragging(false);
-    pressedInputRef.current = null;
     pressedThumbCenterOffsetRef.current = null;
+
+    // If the value array shrank or grew mid-drag, the cached interaction value no longer
+    // matches the current thumbs (the pressed index can still be in range), so dropping it
+    // keeps a stale or malformed array from being committed on release.
+    const interactionValue = currentInteractionValueRef.current;
+    if (Array.isArray(interactionValue) && interactionValue.length !== values.length) {
+      currentInteractionValueRef.current = null;
+    }
     if (currentInteractionValueRef.current != null) {
       const commitReason = lastChangeReasonRef.current;
       onValueCommitted(currentInteractionValueRef.current, createGenericEventDetails(commitReason, nativeEvent));
@@ -308,8 +296,6 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
     }
     pressedThumbIndexRef.current = -1;
     touchIdRef.current = null;
-    pressedValuesRef.current = null;
-    currentInteractionValueRef.current = null;
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     stopListening();
   });
@@ -322,22 +308,21 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
       return;
     }
     const touch = nativeEvent.changedTouches[0];
-    if (touch != null) {
-      touchIdRef.current = touch.identifier;
+    if (touch == null) {
+      return;
     }
-    const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);
-    if (fingerCoords != null) {
-      startPressing(fingerCoords);
-      const finger = getFingerState(fingerCoords);
-      if (finger == null) {
-        return;
-      }
-      focusThumb(finger.thumbIndex);
-      const applied = setValueFromPointer(finger, REASONS.trackPress, nativeEvent);
-      if (applied && finger.didSwap) {
-        focusThumb(finger.thumbIndex);
-      }
+    touchIdRef.current = touch.identifier;
+    const fingerCoords = {
+      x: touch.clientX,
+      y: touch.clientY
+    };
+    startPressing(fingerCoords);
+    const finger = getFingerState(fingerCoords);
+    if (finger == null) {
+      return;
     }
+    focusThumb(finger.thumbIndex);
+    setValueFromPointer(finger, REASONS.trackPress, nativeEvent);
     moveCountRef.current = 0;
     const doc = ownerDocument(controlRef.current);
     doc.addEventListener('touchmove', handleTouchMove, {
@@ -393,35 +378,33 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
           resetPressedThumb();
           return;
         }
-        const fingerCoords = getFingerCoords(event, touchIdRef);
-        if (fingerCoords != null) {
-          startPressing(fingerCoords);
-          const finger = getFingerState(fingerCoords);
-          if (finger == null) {
-            return;
-          }
-          const pressedOnFocusedThumb = contains(thumbRefs.current[finger.thumbIndex], activeElement(ownerDocument(control)));
-          if (pressedOnFocusedThumb) {
-            event.preventDefault();
-          } else {
-            focusFrame.request(() => {
-              focusThumb(finger.thumbIndex);
-            });
-          }
-          setDragging(true);
-          const pressedOnAnyThumb = pressedThumbCenterOffsetRef.current != null;
-          if (!pressedOnAnyThumb) {
-            const applied = setValueFromPointer(finger, REASONS.trackPress, event.nativeEvent);
-            if (applied && finger.didSwap) {
-              focusThumb(finger.thumbIndex);
-            }
-          }
+        const fingerCoords = {
+          x: event.clientX,
+          y: event.clientY
+        };
+        startPressing(fingerCoords);
+        const finger = getFingerState(fingerCoords);
+        if (finger == null) {
+          return;
+        }
+        const pressedOnFocusedThumb = contains(thumbRefs.current[finger.thumbIndex], activeElement(ownerDocument(control)));
+        if (pressedOnFocusedThumb) {
+          event.preventDefault();
+        } else {
+          focusFrame.request(() => {
+            focusThumb(finger.thumbIndex);
+          });
+        }
+        setDragging(true);
+        const pressedOnAnyThumb = pressedThumbCenterOffsetRef.current != null;
+        if (!pressedOnAnyThumb) {
+          setValueFromPointer(finger, REASONS.trackPress, event.nativeEvent);
         }
         if (event.nativeEvent.pointerId) {
           control.setPointerCapture(event.nativeEvent.pointerId);
         }
         moveCountRef.current = 0;
-        const doc = ownerDocument(controlRef.current);
+        const doc = ownerDocument(control);
         doc.addEventListener('pointermove', handleTouchMove, {
           passive: true
         });

package/slider/indicator/SliderIndicator.js

@@ -12,43 +12,24 @@ var _useIsHydrating = require("../../utils/useIsHydrating");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _SliderRootContext = require("../root/SliderRootContext");
 var _stateAttributesMapping = require("../root/stateAttributesMapping");
-function getInsetStyles(vertical, range, start, end, renderBeforeHydration, hydrating) {
-  const visibility = start === undefined || range && end === undefined ? 'hidden' : undefined;
-  const startEdge = vertical ? 'bottom' : 'insetInlineStart';
-  const mainSide = vertical ? 'height' : 'width';
-  const crossSide = vertical ? 'width' : 'height';
+function getIndicatorStyles(vertical, range, inset, start, end, forceHidden) {
   const styles = {
-    visibility: renderBeforeHydration && hydrating ? 'hidden' : visibility,
+    visibility: forceHidden || inset && (start === undefined || range && end === undefined) ? 'hidden' : undefined,
     position: vertical ? 'absolute' : 'relative',
-    [crossSide]: 'inherit'
+    [vertical ? 'width' : 'height']: 'inherit'
   };
-  styles['--start-position'] = `${start ?? 0}%`;
-  if (!range) {
-    styles[startEdge] = 0;
-    styles[mainSide] = 'var(--start-position)';
-    return styles;
+  let startValue = `${start ?? 0}%`;
+  let sizeValue = `${(end ?? 0) - (start ?? 0)}%`;
+  if (inset) {
+    styles['--start-position'] = startValue;
+    startValue = 'var(--start-position)';
+    if (range) {
+      styles['--relative-size'] = sizeValue;
+      sizeValue = 'var(--relative-size)';
+    }
   }
-  styles['--relative-size'] = `${(end ?? 0) - (start ?? 0)}%`;
-  styles[startEdge] = 'var(--start-position)';
-  styles[mainSide] = 'var(--relative-size)';
-  return styles;
-}
-function getCenteredStyles(vertical, range, start, end) {
-  const startEdge = vertical ? 'bottom' : 'insetInlineStart';
-  const mainSide = vertical ? 'height' : 'width';
-  const crossSide = vertical ? 'width' : 'height';
-  const styles = {
-    position: vertical ? 'absolute' : 'relative',
-    [crossSide]: 'inherit'
-  };
-  if (!range) {
-    styles[startEdge] = 0;
-    styles[mainSide] = `${start}%`;
-    return styles;
-  }
-  const size = end - start;
-  styles[startEdge] = `${start}%`;
-  styles[mainSide] = `${size}%`;
+  styles[vertical ? 'bottom' : 'insetInlineStart'] = range ? startValue : 0;
+  styles[vertical ? 'height' : 'width'] = range ? sizeValue : startValue;
   return styles;
 }
 
@@ -78,7 +59,7 @@ const SliderIndicator = exports.SliderIndicator = /*#__PURE__*/React.forwardRef(
   const isHydrating = (0, _useIsHydrating.useIsHydrating)();
   const vertical = orientation === 'vertical';
   const range = values.length > 1;
-  const style = inset ? getInsetStyles(vertical, range, indicatorPosition[0], indicatorPosition[1], renderBeforeHydration, isHydrating) : getCenteredStyles(vertical, range, (0, _valueToPercent.valueToPercent)(values[0], min, max), (0, _valueToPercent.valueToPercent)(values[values.length - 1], min, max));
+  const style = getIndicatorStyles(vertical, range, inset, inset ? indicatorPosition[0] : (0, _valueToPercent.valueToPercent)(values[0], min, max), inset ? indicatorPosition[1] : (0, _valueToPercent.valueToPercent)(values[values.length - 1], min, max), inset && renderBeforeHydration && isHydrating);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: forwardedRef,

package/slider/indicator/SliderIndicator.mjs

@@ -6,43 +6,24 @@ import { useIsHydrating } from "../../utils/useIsHydrating.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { useSliderRootContext } from "../root/SliderRootContext.mjs";
 import { sliderStateAttributesMapping } from "../root/stateAttributesMapping.mjs";
-function getInsetStyles(vertical, range, start, end, renderBeforeHydration, hydrating) {
-  const visibility = start === undefined || range && end === undefined ? 'hidden' : undefined;
-  const startEdge = vertical ? 'bottom' : 'insetInlineStart';
-  const mainSide = vertical ? 'height' : 'width';
-  const crossSide = vertical ? 'width' : 'height';
+function getIndicatorStyles(vertical, range, inset, start, end, forceHidden) {
   const styles = {
-    visibility: renderBeforeHydration && hydrating ? 'hidden' : visibility,
+    visibility: forceHidden || inset && (start === undefined || range && end === undefined) ? 'hidden' : undefined,
     position: vertical ? 'absolute' : 'relative',
-    [crossSide]: 'inherit'
+    [vertical ? 'width' : 'height']: 'inherit'
   };
-  styles['--start-position'] = `${start ?? 0}%`;
-  if (!range) {
-    styles[startEdge] = 0;
-    styles[mainSide] = 'var(--start-position)';
-    return styles;
+  let startValue = `${start ?? 0}%`;
+  let sizeValue = `${(end ?? 0) - (start ?? 0)}%`;
+  if (inset) {
+    styles['--start-position'] = startValue;
+    startValue = 'var(--start-position)';
+    if (range) {
+      styles['--relative-size'] = sizeValue;
+      sizeValue = 'var(--relative-size)';
+    }
   }
-  styles['--relative-size'] = `${(end ?? 0) - (start ?? 0)}%`;
-  styles[startEdge] = 'var(--start-position)';
-  styles[mainSide] = 'var(--relative-size)';
-  return styles;
-}
-function getCenteredStyles(vertical, range, start, end) {
-  const startEdge = vertical ? 'bottom' : 'insetInlineStart';
-  const mainSide = vertical ? 'height' : 'width';
-  const crossSide = vertical ? 'width' : 'height';
-  const styles = {
-    position: vertical ? 'absolute' : 'relative',
-    [crossSide]: 'inherit'
-  };
-  if (!range) {
-    styles[startEdge] = 0;
-    styles[mainSide] = `${start}%`;
-    return styles;
-  }
-  const size = end - start;
-  styles[startEdge] = `${start}%`;
-  styles[mainSide] = `${size}%`;
+  styles[vertical ? 'bottom' : 'insetInlineStart'] = range ? startValue : 0;
+  styles[vertical ? 'height' : 'width'] = range ? sizeValue : startValue;
   return styles;
 }
 
@@ -72,7 +53,7 @@ export const SliderIndicator = /*#__PURE__*/React.forwardRef(function SliderIndi
   const isHydrating = useIsHydrating();
   const vertical = orientation === 'vertical';
   const range = values.length > 1;
-  const style = inset ? getInsetStyles(vertical, range, indicatorPosition[0], indicatorPosition[1], renderBeforeHydration, isHydrating) : getCenteredStyles(vertical, range, valueToPercent(values[0], min, max), valueToPercent(values[values.length - 1], min, max));
+  const style = getIndicatorStyles(vertical, range, inset, inset ? indicatorPosition[0] : valueToPercent(values[0], min, max), inset ? indicatorPosition[1] : valueToPercent(values[values.length - 1], min, max), inset && renderBeforeHydration && isHydrating);
   const element = useRenderElement('div', componentProps, {
     state,
     ref: forwardedRef,

package/slider/root/SliderRoot.d.mts

@@ -68,7 +68,7 @@ export interface SliderRootProps<Value extends number | readonly number[] = numb
    */
   disabled?: boolean | undefined;
   /**
-   * Options to format the input value.
+   * Options to format the value.
    */
   format?: Intl.NumberFormatOptions | undefined;
   /**
@@ -139,12 +139,14 @@ export interface SliderRootProps<Value extends number | readonly number[] = numb
   thumbCollisionBehavior?: 'push' | 'swap' | 'none' | undefined;
   /**
    * The value of the slider.
-   * For ranged sliders, provide an array with two values.
+   * For range sliders, provide an array with one value per thumb.
    */
   value?: Value | undefined;
   /**
    * Callback function that is fired when the slider's value changed.
-   * You can pull out the new value by accessing `event.target.value` (any).
+   * Receives the new value as the first argument; the originating event is
+   * available as `eventDetails.event`. The value is also reflected on
+   * `eventDetails.event.target.value` for form integration.
    *
    * The `eventDetails.reason` indicates what triggered the change:
    *