@cdx-ui/primitives 0.0.1-beta.170 → 0.0.1-beta.172

package/src/slider/SliderThumb.tsx

@@ -1,9 +1,10 @@
-import { forwardRef, useCallback, useMemo, useRef, type ComponentRef } from 'react';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, type ComponentRef } from 'react';
 import {
   PanResponder,
   Platform,
   Pressable,
   View,
+  type AccessibilityActionEvent,
   type GestureResponderEvent,
   type LayoutChangeEvent,
   type PressableProps,
@@ -15,10 +16,32 @@ import { useHover, usePress } from '@react-native-aria/interactions';
 import { Slot } from '../slot';
 import { assignRef } from '../utils/assignRef';
 import { dataAttributes } from '../utils/dataAttributes';
-import { useSliderContext } from './context';
+import { SliderThumbProvider, useSliderContext } from './context';
 import type { InterfaceSliderThumbProps } from './types';
 import { getPointerCoords, useWebSliderDrag } from './useSliderPointer';
-import { clamp, getThumbTravel, percentToThumbOffset } from './utils';
+import {
+  clamp,
+  formatSliderValue,
+  getThumbTravel,
+  percentToThumbOffset,
+  valueToPercent,
+} from './utils';
+
+const STEP_KEYS = new Set(['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft', 'Home', 'End']);
+
+function getDefaultThumbAccessibilityLabel(
+  index: number,
+  thumbCount: number,
+  groupAccessibilityLabel?: string,
+): string | undefined {
+  if (thumbCount === 2) {
+    return index === 0 ? 'Minimum' : 'Maximum';
+  }
+  if (thumbCount > 2) {
+    return `Value ${String(index + 1)} of ${String(thumbCount)}`;
+  }
+  return groupAccessibilityLabel;
+}
 
 export interface SliderThumbProps extends InterfaceSliderThumbProps {}
 
@@ -26,7 +49,10 @@ export const SliderThumb = forwardRef<ComponentRef<typeof Pressable>, SliderThum
   (
     {
       asChild,
+      index = 0,
       style,
+      accessibilityLabel: accessibilityLabelProp,
+      accessibilityValue: accessibilityValueProp,
       onLayout,
       onHoverIn,
       onHoverOut,
@@ -40,32 +66,52 @@ export const SliderThumb = forwardRef<ComponentRef<typeof Pressable>, SliderThum
     ref,
   ) => {
     const {
-      percent,
+      values,
+      min,
+      max,
+      step,
       orientation,
       isDisabled,
-      isDragging,
+      thumbCount,
+      groupAccessibilityLabel,
+      accessibilityValueProp: rootAccessibilityValueProp,
       trackLayout,
       thumbSize,
-      setValueFromRatio,
-      setIsDragging,
-      setIsHovered,
-      setIsFocused,
+      getThumbPercent,
+      getThumbMinValue,
+      getThumbMaxValue,
+      setThumbValue,
+      setThumbValueFromRatio,
+      setDraggingIndex,
+      setHoveredIndex,
+      setFocusedIndex,
       setThumbSize,
-      thumbRef,
+      registerThumb,
+      isThumbDragging,
+      thumbRef: deprecatedThumbRef,
     } = useSliderContext();
 
+    const value = values[index] ?? min;
+    const percent = getThumbPercent(index);
+    const isDragging = isThumbDragging(index);
+    const thumbRef = useRef<View>(null);
+
+    useEffect(() => {
+      return registerThumb(index);
+    }, [index, registerThumb]);
+
+    useEffect(() => {
+      if (index === 0) {
+        deprecatedThumbRef.current = thumbRef.current;
+      }
+    });
+
     const percentRef = useRef(percent);
     percentRef.current = percent;
 
     const dragStartRatio = useRef(0);
     const lastRatioRef = useRef(percent / 100);
 
-    // The native PanResponder is created once (stable across renders) so an
-    // in-flight gesture is never handed a fresh internal `gestureState`
-    // mid-drag. In controlled mode `setValueFromRatio`/`trackLayout` change
-    // identity on every value update, so the handlers read the current values
-    // through refs instead of closing over them (which would force the
-    // `useMemo` to re-create the responder on every move and reset `dx`).
     const orientationRef = useRef(orientation);
     orientationRef.current = orientation;
     const trackLayoutRef = useRef(trackLayout);
@@ -74,10 +120,12 @@ export const SliderThumb = forwardRef<ComponentRef<typeof Pressable>, SliderThum
     thumbSizeRef.current = thumbSize;
     const isDisabledRef = useRef(isDisabled);
     isDisabledRef.current = isDisabled;
-    const setValueFromRatioRef = useRef(setValueFromRatio);
-    setValueFromRatioRef.current = setValueFromRatio;
-    const setIsDraggingRef = useRef(setIsDragging);
-    setIsDraggingRef.current = setIsDragging;
+    const indexRef = useRef(index);
+    indexRef.current = index;
+    const setThumbValueFromRatioRef = useRef(setThumbValueFromRatio);
+    setThumbValueFromRatioRef.current = setThumbValueFromRatio;
+    const setDraggingIndexRef = useRef(setDraggingIndex);
+    setDraggingIndexRef.current = setDraggingIndex;
 
     const { hoverProps, isHovered } = useHover();
     const { focusProps, isFocused } = useFocus();
@@ -90,10 +138,24 @@ export const SliderThumb = forwardRef<ComponentRef<typeof Pressable>, SliderThum
       pressProps: Pick<PressableProps, 'onPressIn' | 'onPressOut'>;
     };
 
+    const setRatioForThumb = useCallback(
+      (ratio: number, complete?: boolean) => {
+        setThumbValueFromRatio(index, ratio, complete);
+      },
+      [index, setThumbValueFromRatio],
+    );
+
+    const setDraggingForThumb = useCallback(
+      (dragging: boolean) => {
+        setDraggingIndex(dragging ? index : null);
+      },
+      [index, setDraggingIndex],
+    );
+
     const { startDrag } = useWebSliderDrag({
       isDisabled,
-      setIsDragging,
-      setValueFromRatio,
+      setIsDragging: setDraggingForThumb,
+      setValueFromRatio: setRatioForThumb,
       trackLayout,
       orientation,
       thumbSize,
@@ -108,7 +170,7 @@ export const SliderThumb = forwardRef<ComponentRef<typeof Pressable>, SliderThum
             if (isDisabledRef.current) {
               return;
             }
-            setIsDraggingRef.current(true);
+            setDraggingIndexRef.current(indexRef.current);
             dragStartRatio.current = percentRef.current / 100;
             lastRatioRef.current = dragStartRatio.current;
           },
@@ -126,15 +188,15 @@ export const SliderThumb = forwardRef<ComponentRef<typeof Pressable>, SliderThum
             const delta = isHorizontal ? gestureState.dx : -gestureState.dy;
             const nextRatio = clamp(dragStartRatio.current + delta / travel, 0, 1);
             lastRatioRef.current = nextRatio;
-            setValueFromRatioRef.current(nextRatio);
+            setThumbValueFromRatioRef.current(indexRef.current, nextRatio);
           },
           onPanResponderRelease: () => {
-            setIsDraggingRef.current(false);
-            setValueFromRatioRef.current(lastRatioRef.current, true);
+            setDraggingIndexRef.current(null);
+            setThumbValueFromRatioRef.current(indexRef.current, lastRatioRef.current, true);
           },
           onPanResponderTerminate: () => {
-            setIsDraggingRef.current(false);
-            setValueFromRatioRef.current(lastRatioRef.current, true);
+            setDraggingIndexRef.current(null);
+            setThumbValueFromRatioRef.current(indexRef.current, lastRatioRef.current, true);
           },
         }),
       [],
@@ -149,13 +211,15 @@ export const SliderThumb = forwardRef<ComponentRef<typeof Pressable>, SliderThum
             : trackLayout.height;
       const offset = percentToThumbOffset(percent, trackSize, thumbSize);
 
+      const zIndex = isDragging ? 3 : 2;
+
       if (orientation === 'vertical') {
         return {
           position: 'absolute',
           left: '50%',
           bottom: offset,
           marginLeft: -thumbSize / 2,
-          zIndex: 2,
+          zIndex,
         };
       }
 
@@ -164,9 +228,9 @@ export const SliderThumb = forwardRef<ComponentRef<typeof Pressable>, SliderThum
         top: '50%',
         left: offset,
         transform: [{ translateY: -thumbSize / 2 }],
-        zIndex: 2,
+        zIndex,
       };
-    }, [orientation, percent, thumbSize, trackLayout]);
+    }, [isDragging, orientation, percent, thumbSize, trackLayout]);
 
     const handleLayout = useCallback(
       (event: LayoutChangeEvent) => {
@@ -175,9 +239,7 @@ export const SliderThumb = forwardRef<ComponentRef<typeof Pressable>, SliderThum
         if (measured > 0) {
           setThumbSize(measured);
         }
-        if (onLayout) {
-          onLayout(event);
-        }
+        onLayout?.(event);
       },
       [onLayout, orientation, setThumbSize],
     );
@@ -195,72 +257,162 @@ export const SliderThumb = forwardRef<ComponentRef<typeof Pressable>, SliderThum
       [isDisabled, startDrag],
     );
 
-    const isWeb = Platform.OS === 'web';
+    const thumbMin = getThumbMinValue(index);
+    const thumbMax = getThumbMaxValue(index);
+
+    const accessibilityValue = useMemo(() => {
+      const thumbPercent = valueToPercent(value, min, max);
+      const defaults = {
+        min: 0,
+        max: 100,
+        now: Math.round(thumbPercent),
+        text: formatSliderValue(value),
+      };
+
+      const mergedRoot = rootAccessibilityValueProp
+        ? { ...defaults, ...rootAccessibilityValueProp }
+        : defaults;
+      if (accessibilityValueProp === undefined) {
+        return mergedRoot;
+      }
+      return { ...mergedRoot, ...accessibilityValueProp };
+    }, [accessibilityValueProp, max, min, rootAccessibilityValueProp, value]);
+
+    const resolvedAccessibilityLabel =
+      accessibilityLabelProp ??
+      getDefaultThumbAccessibilityLabel(index, thumbCount, groupAccessibilityLabel);
 
-    // Native drag is driven by PanResponder. Its `panHandlers` set the same
-    // responder props (`onResponderGrant/Move/Release`, etc.) that RN's
-    // `Pressable`/`Pressability` also set internally — and `Pressable` spreads
-    // its own handlers last, silently clobbering ours. So on native the thumb
-    // must be a plain `View` that carries `panHandlers` directly. Web keeps
-    // `Pressable` for its pointer-event, hover, and focus-ring behavior.
+    const handleKeyDown = useCallback(
+      (event: { nativeEvent: { key?: string }; preventDefault?: () => void }) => {
+        if (isDisabled) {
+          return;
+        }
+        const key = event.nativeEvent.key;
+        if (!key || !STEP_KEYS.has(key)) {
+          return;
+        }
+        if (Platform.OS === 'web') {
+          event.preventDefault?.();
+        }
+
+        let next = value;
+        if (key === 'ArrowUp' || key === 'ArrowRight') {
+          next = value + step;
+        } else if (key === 'ArrowDown' || key === 'ArrowLeft') {
+          next = value - step;
+        } else if (key === 'Home') {
+          next = thumbMin;
+        } else if (key === 'End') {
+          next = thumbMax;
+        }
+
+        setThumbValue(index, next, true);
+      },
+      [index, isDisabled, setThumbValue, step, thumbMax, thumbMin, value],
+    );
+
+    const handleAccessibilityAction = useCallback(
+      (event: AccessibilityActionEvent) => {
+        if (isDisabled) {
+          return;
+        }
+        if (event.nativeEvent.actionName === 'increment') {
+          setThumbValue(index, value + step, true);
+        } else if (event.nativeEvent.actionName === 'decrement') {
+          setThumbValue(index, value - step, true);
+        }
+      },
+      [index, isDisabled, setThumbValue, step, value],
+    );
+
+    const thumbContextValue = useMemo(
+      () => ({
+        index,
+        value,
+        percent,
+        isDragging,
+        isHovered,
+        isFocused,
+        thumbRef,
+      }),
+      [index, isDragging, isFocused, isHovered, percent, value],
+    );
+
+    const isWeb = Platform.OS === 'web';
     const Comp = asChild ? Slot : isWeb ? Pressable : View;
 
     const setThumbRef = useCallback(
       (node: ComponentRef<typeof Pressable> | null) => {
         thumbRef.current = node;
+        if (index === 0) {
+          deprecatedThumbRef.current = node;
+        }
         assignRef(ref, node);
       },
-      [ref, thumbRef],
+      [deprecatedThumbRef, index, ref],
     );
 
-    const webInteractionProps: PressableProps = {
-      onPointerDown: handlePointerDown as unknown as PressableProps['onPointerDown'],
-      onHoverIn: composeEventHandlers(
-        onHoverIn,
-        composeEventHandlers(hoverProps.onHoverIn, () => setIsHovered(true)),
-      ),
-      onHoverOut: composeEventHandlers(
-        onHoverOut,
-        composeEventHandlers(hoverProps.onHoverOut, () => setIsHovered(false)),
-      ),
-      onPressIn: composeEventHandlers(onPressIn, pressableProps.onPressIn),
-      onPressOut: composeEventHandlers(onPressOut, pressableProps.onPressOut),
-      disabled: isDisabled,
-      tabIndex: -1,
-    };
+    const webInteractionProps =
+      Platform.OS === 'web'
+        ? ({
+            onPointerDown: handlePointerDown as unknown as PressableProps['onPointerDown'],
+            onHoverIn: composeEventHandlers(
+              onHoverIn,
+              composeEventHandlers(hoverProps.onHoverIn, () => setHoveredIndex(index)),
+            ),
+            onHoverOut: composeEventHandlers(
+              onHoverOut,
+              composeEventHandlers(hoverProps.onHoverOut, () => setHoveredIndex(null)),
+            ),
+            onPressIn: composeEventHandlers(onPressIn, pressableProps.onPressIn),
+            onPressOut: composeEventHandlers(onPressOut, pressableProps.onPressOut),
+            disabled: isDisabled,
+            tabIndex: isDisabled ? -1 : 0,
+            onKeyDown: handleKeyDown,
+            role: 'slider',
+            'aria-valuemin': thumbMin,
+            'aria-valuemax': thumbMax,
+            'aria-valuenow': value,
+            'aria-orientation': orientation,
+            'aria-disabled': isDisabled,
+          } as PressableProps)
+        : ({} as PressableProps);
 
     return (
-      <Comp
-        ref={setThumbRef}
-        {...(props as PressableProps)}
-        {...(isWeb ? webInteractionProps : panResponder.panHandlers)}
-        onLayout={handleLayout}
-        onFocus={composeEventHandlers(
-          composeEventHandlers(onFocus as (...args: unknown[]) => unknown, focusProps.onFocus),
-          composeEventHandlers(focusRingProps.onFocus, () => setIsFocused(true)),
-        )}
-        onBlur={composeEventHandlers(
-          composeEventHandlers(onBlur as (...args: unknown[]) => unknown, focusProps.onBlur),
-          composeEventHandlers(focusRingProps.onBlur, () => setIsFocused(false)),
-        )}
-        style={[thumbStyle, style]}
-        accessibilityRole="none"
-        importantForAccessibility="no"
-        {...dataAttributes({
-          slot: 'slider-thumb',
-          hover: isHovered,
-          focus: isFocused,
-          focusVisible: isFocusVisible,
-          // On native there is no `Pressable`, so `usePress` never fires; the
-          // drag state stands in for "active" so the thumb still scales while
-          // the user is dragging (see `data-[active=true]:scale-105`).
-          active: isPressed || isDragging,
-          dragging: isDragging,
-          disabled: isDisabled,
-        })}
-      >
-        {children}
-      </Comp>
+      <SliderThumbProvider value={thumbContextValue}>
+        <Comp
+          ref={setThumbRef}
+          {...(props as PressableProps)}
+          {...(isWeb ? webInteractionProps : panResponder.panHandlers)}
+          onLayout={handleLayout}
+          onFocus={composeEventHandlers(
+            composeEventHandlers(onFocus as (...args: unknown[]) => unknown, focusProps.onFocus),
+            composeEventHandlers(focusRingProps.onFocus, () => setFocusedIndex(index)),
+          )}
+          onBlur={composeEventHandlers(
+            composeEventHandlers(onBlur as (...args: unknown[]) => unknown, focusProps.onBlur),
+            composeEventHandlers(focusRingProps.onBlur, () => setFocusedIndex(null)),
+          )}
+          style={[thumbStyle, style]}
+          accessibilityRole="adjustable"
+          accessibilityLabel={resolvedAccessibilityLabel}
+          accessibilityValue={accessibilityValue}
+          accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]}
+          onAccessibilityAction={handleAccessibilityAction}
+          accessibilityState={{ disabled: isDisabled }}
+          {...dataAttributes({
+            slot: 'slider-thumb',
+            hover: isHovered,
+            focus: isFocused,
+            focusVisible: isFocusVisible,
+            active: isPressed || isDragging,
+            dragging: isDragging,
+            disabled: isDisabled,
+          })}
+        >
+          {children}
+        </Comp>
+      </SliderThumbProvider>
     );
   },
 );

package/src/slider/context.tsx

@@ -1,7 +1,7 @@
 import type { RefObject } from 'react';
 import type { View } from 'react-native';
 import { createContext } from '@cdx-ui/utils';
-import type { SliderOrientation } from './types';
+import type { SliderAccessibilityValue, SliderOrientation } from './types';
 
 export interface SliderTrackLayout {
   readonly width: number;
@@ -11,28 +11,72 @@ export interface SliderTrackLayout {
 }
 
 export interface SliderContextValue {
-  readonly value: number;
+  readonly values: readonly number[];
   readonly min: number;
   readonly max: number;
   readonly step: number;
-  readonly percent: number;
   readonly orientation: SliderOrientation;
   readonly isDisabled: boolean;
-  readonly isDragging: boolean;
-  readonly isHovered: boolean;
-  readonly isFocused: boolean;
+  readonly draggingIndex: number | null;
+  readonly hoveredIndex: number | null;
+  readonly focusedIndex: number | null;
   readonly trackLayout: SliderTrackLayout | null;
   readonly thumbSize: number;
-  readonly setValue: (value: number, complete?: boolean) => void;
-  readonly setValueFromRatio: (ratio: number, complete?: boolean) => void;
+  readonly thumbCount: number;
+  readonly groupAccessibilityLabel?: string;
+  readonly accessibilityValueProp?: SliderAccessibilityValue;
+  readonly getThumbPercent: (index: number) => number;
+  readonly getThumbMinValue: (index: number) => number;
+  readonly getThumbMaxValue: (index: number) => number;
+  readonly setThumbValue: (index: number, value: number, complete?: boolean) => void;
+  readonly setThumbValueFromRatio: (index: number, ratio: number, complete?: boolean) => void;
+  readonly setNearestThumbValueFromRatio: (ratio: number, complete?: boolean) => void;
   readonly setTrackLayout: (layout: SliderTrackLayout) => void;
   readonly setThumbSize: (size: number) => void;
+  readonly setDraggingIndex: (index: number | null) => void;
+  readonly setHoveredIndex: (index: number | null) => void;
+  readonly setFocusedIndex: (index: number | null) => void;
+  readonly getThumbValueLabel: (index: number) => string;
+  readonly registerThumb: (index: number) => () => void;
+  readonly isThumbDragging: (index: number) => boolean;
+  /** @deprecated Use `values[0]` */
+  readonly value: number;
+  /** @deprecated Use `getThumbPercent(0)` */
+  readonly percent: number;
+  /** @deprecated Use `draggingIndex !== null` */
+  readonly isDragging: boolean;
+  /** @deprecated Use `getThumbValueLabel(0)` */
+  readonly getValueLabel: () => string;
+  /** @deprecated Use `setThumbValue(0, …)` */
+  readonly setValue: (value: number, complete?: boolean) => void;
+  /** @deprecated Use `setNearestThumbValueFromRatio` */
+  readonly setValueFromRatio: (ratio: number, complete?: boolean) => void;
+  /** @deprecated Use per-thumb context `thumbRef` */
+  readonly thumbRef: RefObject<View | null>;
+  /** @deprecated Use `hoveredIndex !== null` */
+  readonly isHovered: boolean;
+  /** @deprecated Use `focusedIndex !== null` */
+  readonly isFocused: boolean;
+  /** @deprecated Use `setDraggingIndex` */
   readonly setIsDragging: (dragging: boolean) => void;
+  /** @deprecated Use `setHoveredIndex` */
   readonly setIsHovered: (hovered: boolean) => void;
+  /** @deprecated Use `setFocusedIndex` */
   readonly setIsFocused: (focused: boolean) => void;
-  readonly getValueLabel: () => string;
+}
+
+export interface SliderThumbContextValue {
+  readonly index: number;
+  readonly value: number;
+  readonly percent: number;
+  readonly isDragging: boolean;
+  readonly isHovered: boolean;
+  readonly isFocused: boolean;
   readonly thumbRef: RefObject<View | null>;
 }
 
 export const [SliderProvider, useSliderContext] =
   createContext<SliderContextValue>('SliderContext');
+
+export const [SliderThumbProvider, useSliderThumbContext] =
+  createContext<SliderThumbContextValue>('SliderThumbContext');

package/src/slider/index.ts

@@ -4,15 +4,22 @@ export type {
   ISliderThumbProps,
   SliderAccessibilityValue,
   SliderOrientation,
+  SliderRangeValueProps,
+  SliderSingleValueProps,
 } from './types';
-export type { SliderContextValue, SliderTrackLayout } from './context';
-export { useSliderContext } from './context';
+export type { SliderContextValue, SliderThumbContextValue, SliderTrackLayout } from './context';
+export { useSliderContext, useSliderThumbContext } from './context';
 export { SliderRoot, type SliderRootProps } from './SliderRoot';
 export { SliderRail, type SliderRailProps } from './SliderRail';
 export { SliderThumb, type SliderThumbProps } from './SliderThumb';
 export {
+  arraysEqual,
+  denormalizeSliderValue,
+  getClosestValueIndex,
+  getFillExtent,
   getMarkerPositionStyle,
   getMarkerStepValues,
+  normalizeSliderValue,
   percentToFillExtent,
   SLIDER_MARKER_SIZE,
   valueToPercent,

package/src/slider/types.ts

@@ -5,30 +5,67 @@ export type SliderOrientation = 'horizontal' | 'vertical';
 
 export type SliderAccessibilityValue = NonNullable<ViewProps['accessibilityValue']>;
 
-export interface InterfaceSliderProps extends Omit<ViewProps, 'children' | 'accessibilityValue'> {
-  readonly value?: number;
-  readonly defaultValue?: number;
-  readonly onChange?: (value: number) => void;
-  readonly onChangeComplete?: (value: number) => void;
+export type SliderValue = number | readonly number[];
+
+interface SliderBaseProps extends Omit<ViewProps, 'children' | 'accessibilityValue'> {
+  /** Minimum selectable value. @default `0` */
   readonly min?: number;
+  /** Maximum selectable value. @default `100` */
   readonly max?: number;
+  /**
+   * Increment used to snap value updates and generate automatic `Slider.MarkerGroup` marks.
+   * @default `1`
+   */
   readonly step?: number;
+  /** Disables pointer, keyboard, and screen reader interaction. @default `false` */
   readonly isDisabled?: boolean;
+  /** Slider axis. @default `'horizontal'` */
   readonly orientation?: SliderOrientation;
   /**
-   * Screen reader label when there is no visible label.
+   * Screen reader label for the slider group when there is no visible label.
    */
   readonly accessibilityLabel?: string;
   /**
-   * Screen reader value for the slider. Merged with derived `min`, `max`, `now`, and formatted
-   * `text` when fields are omitted. `text` overrides the numeric announcement when set.
+   * Screen reader value override. Merged with derived per-thumb values when fields are omitted;
+   * `text` replaces the formatted announcement. Native numeric values are normalized to 0–100.
    */
   readonly accessibilityValue?: SliderAccessibilityValue;
   readonly children?: ReactNode;
 }
 
+export interface SliderSingleValueProps {
+  readonly value?: number;
+  /** Initial uncontrolled value. Defaults to `min`. */
+  readonly defaultValue?: number;
+  /** Called while the value changes. */
+  readonly onChange?: (value: number) => void;
+  /** Called when a pointer, keyboard, or screen reader interaction completes. */
+  readonly onChangeComplete?: (value: number) => void;
+}
+
+export interface SliderRangeValueProps {
+  readonly value?: readonly number[];
+  /** Initial uncontrolled thumb values. */
+  readonly defaultValue?: readonly number[];
+  /** Called while any thumb value changes. */
+  readonly onChange?: (value: number[]) => void;
+  /** Called when a pointer, keyboard, or screen reader interaction completes. */
+  readonly onChangeComplete?: (value: number[]) => void;
+}
+
+export type InterfaceSliderProps = SliderBaseProps &
+  (SliderSingleValueProps | SliderRangeValueProps);
+
 export type ISliderProps = InterfaceSliderProps;
 
+/** Wider internal props for the root primitive implementation. */
+export interface SliderRootImplementationProps extends SliderBaseProps {
+  readonly value?: number | readonly number[];
+  readonly defaultValue?: number | readonly number[];
+  readonly onChange?: ((value: number) => void) | ((value: number[]) => void);
+  readonly onChangeComplete?: ((value: number) => void) | ((value: number[]) => void);
+}
+
 export interface InterfaceSliderRailProps extends ViewProps {
   readonly asChild?: boolean;
   readonly children?: ReactNode;
@@ -38,6 +75,10 @@ export type ISliderRailProps = InterfaceSliderRailProps;
 
 export interface InterfaceSliderThumbProps extends PressableProps {
   readonly asChild?: boolean;
+  /**
+   * Zero-based thumb index. Defaults to `0` for single-value sliders.
+   */
+  readonly index?: number;
   readonly children?: ReactNode;
 }
 

package/src/slider/useSliderPointer.ts

@@ -77,8 +77,8 @@ export function useWebSliderDrag({
     }
     draggingRef.current = false;
     dragContextRef.current = null;
-    setIsDragging(false);
     setValueFromRatio(lastRatioRef.current, true);
+    setIsDragging(false);
   }, [setIsDragging, setValueFromRatio]);
 
   const startDrag = useCallback(