@astryxdesign/core 0.7.6 → 0.7.7-canary.0d1ddcd

package/dist/Slider/Slider.js

@@ -4,8 +4,8 @@
 
 /**
  * @file Slider.tsx
- * @input Uses React, useId, useRef, useCallback, useEffect, Field, Tooltip, useTooltip, VisuallyHidden
- * @output Exports Slider and its props; unfilled marks share the track token; modifier-only key presses do not restore the thumb focus ring; a drag belongs to the pointer that started it; two coincident range thumbs separate toward the press or the first movement
+ * @input Uses React, useId, useRef, useCallback, useEffect, Field, useTooltip, VisuallyHidden, the touch presentation resolver and useSliderTouch (UISlider's touch tracking)
+ * @output Exports Slider and its props. Unfilled marks share the track token. Modifier-only key presses do not restore the thumb focus ring. A drag belongs to the pointer that started it. The thumbs and the filled range travel by `translate` in container units, so moving them never lays out. Padding on the control moves no part. The value tooltip anchors to a box that layout places at the value. A drag on a thumb is a pan for every pointer, tracked as UISlider does. Under a coarse primary pointer, each thumb's `::before` is its touch target. A finger's tap on the track sets the value on its lift. A mouse press on the track keeps the pointer handlers. Two coincident range thumbs separate toward the press or the first movement
  * @position Core implementation; consumed by index.ts, tested by Slider.test.tsx
  *
  * SYNC: When modified, update these files to stay in sync:
@@ -16,11 +16,11 @@
  * - /packages/cli/assets/templates/blocks/components/Slider/ (showcase blocks)
  */
 import { useEffect, useId, useMemo, useRef, useState, useCallback } from 'react';
+import { flushSync } from 'react-dom';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { Field } from "../Field/Field.js";
-import { Tooltip } from "../Tooltip/Tooltip.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { mergeProps, rtlStyles } from "../utils/index.js";
@@ -30,11 +30,15 @@ import { useInteractionModalityTracking } from "../utils/interactionModality.js"
 import { isRtlElement } from "../hooks/isRtlElement.js";
 import { useFieldInputStyling } from "../Field/fieldParts.js";
 import { themeProps } from "../utils/themeProps.js";
+import { isPrimaryClick } from "../utils/primaryClick.js";
+import { useTouchPresentation } from "../utils/touchPresentation.js";
+import { slider as UIKIT_SLIDER } from "../motion/uikit/slider.js";
+import { useSliderTouch } from "./useSliderTouch.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
 import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
 import english from "../i18n/generated-english/Slider/Slider.generated.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 registerEnglishFallback(english);
 // =============================================================================
 // Types
@@ -47,6 +51,30 @@ registerEnglishFallback(english);
 const TRACK_SIZE = 4;
 const THUMB_SIZE = 20;
 
+/**
+ * Where a thumb sits, as its progress along the travel (0 at `min`, 1 at
+ * `max`), written inline on the thumb. CSS computes its translate from it
+ * against the control's size, in container units. So moving the thumb
+ * restyles and composites but never lays out, and the server renders the
+ * right place. A value tooltip or text display still lays out as its text
+ * changes.
+ */
+const THUMB_PROGRESS = '--_slider-progress';
+/** A thumb's touch-target insets under a finger, which its `::before` draws. */
+const HIT_INSET = {
+  top: '--_slider-hit-top',
+  bottom: '--_slider-hit-bottom',
+  inlineStart: '--_slider-hit-start',
+  inlineEnd: '--_slider-hit-end'
+};
+/** Half a thumb: the inset of the thumb's travel at each end of the track. */
+const THUMB_INSET_PX = THUMB_SIZE / 2;
+/** The filled range's ends as progress, written inline on the fill parts. */
+const FILL_START = '--_slider-fill-start';
+const FILL_END = '--_slider-fill-end';
+
+// The private progress properties a thumb and the fill parts publish inline.
+
 // =============================================================================
 // Styles
 // =============================================================================
@@ -57,7 +85,8 @@ const styles = {
     k1xSpc: "x78zum5",
     kGNEyG: "x6s0dn4",
     kzQI83: "x1iyjqo2",
-    kFalU9: "x5ve5x3",
+    kFalU9: "x5ve5x3 x1xekgvp",
+    kO7zv1: "x1winvzj",
     kfSwDN: "x87ps6o",
     kHBbk8: "xc8icb0",
     $$css: true
@@ -103,29 +132,89 @@ const styles = {
     kzqmXN: "x51ohtg",
     $$css: true
   },
-  filledTrack: {
+  fillClip: {
     kVAEAm: "x10l6tqk",
-    kWkggS: "x1ewilqj",
+    kVQacm: "xb3r6kr",
     kaIpWk: "xjspbzw",
+    kfzvcC: "x47corl",
     $$css: true
   },
-  filledTrackHorizontal: {
+  fillClipHorizontal: {
+    kLqNvP: "x1o0tod",
+    kt4wiu: "xtijo5x",
     kZKoxP: "xqu0tyb",
     k87sOh: "xwa60dl",
     k3aq6I: "x1cb1t30",
     $$css: true
   },
-  filledTrackVertical: {
+  fillClipVertical: {
+    k87sOh: "x13vifvy",
+    krVfgx: "x1ey2m1c",
     kzqmXN: "x51ohtg",
     $$css: true
   },
+  fillMover: {
+    kVAEAm: "x10l6tqk",
+    kpwlN0: "x10a8y8t",
+    kVQacm: "xb3r6kr",
+    $$css: true
+  },
+  fillMoverRangeStartHorizontal: {
+    krdFHd: "x19415el",
+    kVL7Gh: "x1wc3881",
+    $$css: true
+  },
+  fillMoverRangeStartVertical: {
+    kVL7Gh: "x1wc3881",
+    kT0f0o: "x1dgc8on",
+    $$css: true
+  },
+  fillMoverRangeHorizontal: {
+    kIY38u: "xwj4vw1 x8re4u",
+    $$css: true
+  },
+  fillMoverRangeVertical: {
+    kIY38u: "x1p0n03b",
+    $$css: true
+  },
+  filledTrack: {
+    kVAEAm: "x10l6tqk",
+    kpwlN0: "x10a8y8t",
+    kWkggS: "x1ewilqj",
+    $$css: true
+  },
+  filledTrackHorizontal: {
+    kfmiAY: "x8agd5o",
+    kT0f0o: "x1dgc8on",
+    $$css: true
+  },
+  filledTrackVertical: {
+    krdFHd: "x19415el",
+    kfmiAY: "x8agd5o",
+    $$css: true
+  },
+  filledTrackSingleHorizontal: {
+    kIY38u: "x80n2h1 x107x6cy",
+    $$css: true
+  },
+  filledTrackSingleVertical: {
+    kIY38u: "x1hj1i93",
+    $$css: true
+  },
+  filledTrackRangeHorizontal: {
+    kIY38u: "xhvvmt5 x1pq48qv",
+    $$css: true
+  },
+  filledTrackRangeVertical: {
+    kIY38u: "x18n2uh1",
+    $$css: true
+  },
   thumb: {
     kVAEAm: "x10l6tqk",
     kzqmXN: "xw4jnvo",
     kZKoxP: "x1qx5ct2",
     kaIpWk: "xjspbzw",
     kWkggS: "x1ewilqj",
-    k3aq6I: "x11lhmoz",
     k1ekBW: "x106061f",
     kIyJzY: "xuedmi6 x12w9bfk",
     kAMwcw: "xlr8y92",
@@ -135,8 +224,24 @@ const styles = {
     $$css: true
   },
   thumbHorizontal: {
-    k87sOh: "xwa60dl",
-    k3aq6I: "x11lhmoz xoffwj3",
+    k87sOh: "xsf42hv",
+    kLqNvP: "x1o0tod",
+    kIY38u: "x1kfzoes xis8qvo",
+    $$css: true
+  },
+  thumbHit: {
+    kgeoSG: "x1cpjm7i",
+    kEoFBp: "x1hmns74",
+    k96MEf: "xw5uirw",
+    k5Ofw7: "x17wid7s",
+    kSJ0CW: "xu2wnl0",
+    koaPKo: "x1s13ptm",
+    $$css: true
+  },
+  thumbVertical: {
+    krVfgx: "x1ey2m1c",
+    kLqNvP: "x94kg92",
+    kIY38u: "xqt2767",
     $$css: true
   },
   thumbHover: {
@@ -213,12 +318,6 @@ function insetPosition(percent) {
   return cssLength(percent, THUMB_INSET - percent / 100 * THUMB_SIZE);
 }
 
-/** Distance between two inset positions; the inset itself cancels out. */
-function insetSpan(fromPercent, toPercent) {
-  const delta = toPercent - fromPercent;
-  return cssLength(delta, -(delta / 100) * THUMB_SIZE);
-}
-
 /** Inverse of `insetPosition`: an offset from the box start back to 0–1. */
 function travelFraction(offset, size) {
   const travel = size - THUMB_SIZE;
@@ -236,6 +335,41 @@ function cssLength(percent, px) {
   return `calc(${round(percent)}% ${px < 0 ? '-' : '+'} ${Math.abs(round(px))}px)`;
 }
 
+/**
+ * A thumb's value tooltip: hover and focus on the thumb, position from a
+ * thumb-sized anchor that layout places at the value (styles.valueAnchor).
+ */
+function SliderValueTooltip({
+  content,
+  placement,
+  isOpen,
+  anchorStyle,
+  thumbRef,
+  children
+}) {
+  const tooltip = useTooltip({
+    placement,
+    delay: 0,
+    focusTrigger: 'always',
+    isOpen
+  });
+  const triggerRef = useMergedRefs(thumbRef, tooltip.interactionRef);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("span", {
+      "aria-hidden": "true",
+      ref: tooltip.positionRef,
+      ...mergeProps({
+        className: "x10l6tqk xw4jnvo x1qx5ct2 x47corl"
+      }, {
+        style: anchorStyle
+      })
+    }), children({
+      ref: triggerRef,
+      describedBy: tooltip.describedBy
+    }), tooltip.renderTooltip(content)]
+  });
+}
+
 // =============================================================================
 // Component
 // =============================================================================
@@ -324,9 +458,19 @@ export function Slider({
   const statusMessageID = useId();
   const requiredID = useId();
   const trackRef = useRef(null);
+  const fillMoverRef = useRef(null);
+  const fillRef = useRef(null);
   const draggingThumbRef = useRef(null);
   const [draggingThumb, setDraggingThumb] = useState(null);
 
+  // The thumbs track as UISlider's for every pointer (useSliderTouch): a
+  // drag on a thumb is a pan. Their touch targets show only under a coarse
+  // primary pointer, after hydration: one touch model on every touch
+  // device. A mouse press on the track keeps the pointer
+  // handlers below.
+  const isTouchPresentation = useTouchPresentation().isTouch;
+  const hasTouchTargets = isTouchPresentation && !isDisabled;
+
   // A thumb is a div[role="slider"], and `handlePointerDown` focuses it from
   // script after preventDefault — which Chromium treats as focus-visible, so
   // dragging with a mouse drew the keyboard ring (measured: `:focus-visible`
@@ -346,7 +490,7 @@ export function Slider({
   }, []);
 
   // Disabled-reason tooltip. This is a *separate* useTooltip instance from the
-  // per-thumb value bubble (the `<Tooltip>` component below): it anchors to the
+  // per-thumb value bubble (SliderValueTooltip below): it anchors to the
   // track container and fires on hover/focus of the whole control. Disabled
   // controls swallow pointer events, so the thumb stays perceivable via
   // aria-disabled while pointer/keyboard handlers early-return on isDisabled.
@@ -510,6 +654,25 @@ export function Slider({
     if (isDisabled) {
       return;
     }
+    // Only a primary button presses: a right click or a macOS ctrl-click
+    // is the platform's context request, and a pen's
+    // barrel button presses nothing either.
+    if (!isPrimaryClick(e)) {
+      return;
+    }
+    // A press on a thumb belongs to the slider's gestures (useSliderTouch),
+    // which pan it for every pointer. The thumb still takes focus from any
+    // press, as it did. A finger's or a pen's tap on the track sets the
+    // value when it lifts. So only a mouse press on the track goes on.
+    const thumb = e.target.closest('[role="slider"]');
+    if (thumb != null) {
+      thumb.focus();
+      setKeyboardFocusThumb(null);
+      return;
+    }
+    if (e.pointerType === 'touch' || e.pointerType === 'pen') {
+      return;
+    }
     e.preventDefault();
     if (draggingThumbRef.current !== null) {
       return;
@@ -626,6 +789,93 @@ export function Slider({
   }, [isDisabled, getValueFromPosition, updateValue]);
   const handlePointerUp = useCallback(e => endDrag(e.pointerId), [endDrag]);
 
+  // The touch presentation's value model (useSliderTouch reads it fresh).
+  const updateValueRef = useRef(updateValue);
+  updateValueRef.current = updateValue;
+  const touchModel = {
+    min,
+    max,
+    isRange,
+    isHorizontal,
+    isDisabled: isDisabled ?? false,
+    thumbSize: THUMB_SIZE,
+    values: () => valuesRef.current,
+    // The value updateValue would report for this thumb.
+    constrain: (index, raw) => {
+      const next = clamp(snapToStep(raw, min, step), min, max);
+      if (!isRange) {
+        return next;
+      }
+      const minGap = minStepsBetweenThumbs * step;
+      const [v0, v1] = valuesRef.current;
+      return index === 0 ? clamp(Math.min(next, v1 - minGap), min, max) : clamp(Math.max(next, v0 + minGap), min, max);
+    },
+    bounds: index => {
+      if (!isRange) {
+        return [min, max];
+      }
+      const minGap = minStepsBetweenThumbs * step;
+      const [v0, v1] = valuesRef.current;
+      return index === 0 ? [min, clamp(v1 - minGap, min, max)] : [clamp(v0 + minGap, min, max), max];
+    },
+    change: (index, next, from) => updateValueRef.current(index, next, true, from),
+    // A finger paints the thumb pressed and opens its value tooltip.
+    // `handlePointerDown` already focused it.
+    press: index => {
+      setDraggingThumb(index);
+      // When a thumb of this slider holds focus, a drag handed to the other
+      // thumb takes the focus along. Every press on a thumb focuses it.
+      const thumbs = trackRef.current?.querySelectorAll('[role="slider"]');
+      const active = trackRef.current?.ownerDocument.activeElement;
+      if (index != null && thumbs != null && active != null) {
+        const list = Array.from(thumbs);
+        if (list.includes(active) && list[index] !== active) {
+          list[index]?.focus();
+        }
+      }
+    },
+    // The touch interaction ended, in the handler that ended it: the lift, a
+    // cancel or the coast's last frame. The owner renders the last value
+    // now, from that same handler. Then the controller can hand the parts
+    // back to the stylesheet, and onChangeEnd carries the rendered value.
+    commit: (index, next) => {
+      // eslint-disable-next-line @eslint-react/dom-no-flush-sync -- the owner must render the interaction's last value before the parts return to the stylesheet and onChangeEnd reads it
+      flushSync(() => {
+        if (next !== null) {
+          updateValueRef.current(index, next);
+        }
+        setDraggingThumb(null);
+      });
+    },
+    reportEnd: () => fireChangeEnd(),
+    // A tap on the track, from useSliderTouch. It takes a mark's value on a
+    // mark, else the point along the travel. It moves the thumb a track
+    // press moves.
+    valueAt: (x, y) => {
+      const mark = trackRef.current?.ownerDocument.elementFromPoint?.(x, y)?.closest('[data-mark-value]');
+      return mark != null ? Number(mark.dataset.markValue) : getValueFromPosition(x, y);
+    },
+    thumbFor: value => getClosestThumb(value)
+  };
+  useSliderTouch({
+    isEnabled: !isDisabled,
+    model: touchModel,
+    thumbCount: values.length,
+    thumbsWrapped: valueDisplay === 'tooltip' && !showsDisabledMessage,
+    getParts: () => {
+      const control = trackRef.current;
+      if (control == null) {
+        return null;
+      }
+      return {
+        control,
+        thumbs: Array.from(control.querySelectorAll('[role="slider"]')),
+        fillMover: fillMoverRef.current,
+        fill: fillRef.current
+      };
+    }
+  });
+
   // Keyboard handler
   const handleKeyDown = useCallback((thumbIndex, e) => {
     if (isDisabled) {
@@ -706,14 +956,37 @@ export function Slider({
   };
 
   // Render a thumb
+  // Each thumb's touch target grows to UISlider's 48 pt around the thumb.
+  // A range's two targets never reach into each other: on the side facing
+  // the other thumb, the growth stops at half the gap. So a finger takes the
+  // nearer thumb. Container units measure the travel, so the gap needs no
+  // layout read.
+  const hitGrowth = (UIKIT_SLIDER.thumbHitTarget - THUMB_SIZE) / 2;
+  const thumbHitInsets = thumbIndex => {
+    const full = `${-hitGrowth}px`;
+    let facing = full;
+    if (isRange && max > min) {
+      const spread = (values[1] - values[0]) / (max - min);
+      const travel = isHorizontal ? '100cqi' : '100cqb';
+      facing = `calc(-1 * clamp(0px, (${spread} * (${travel} - ${THUMB_SIZE}px) - ${THUMB_SIZE}px) / 2, ${hitGrowth}px))`;
+    }
+    // Values grow toward the inline end, and upward on a vertical slider.
+    const towardLower = isRange && thumbIndex === 1 ? facing : full;
+    const towardUpper = isRange && thumbIndex === 0 ? facing : full;
+    const [top, bottom, inlineStart, inlineEnd] = isHorizontal ? [full, full, towardLower, towardUpper] : [towardUpper, towardLower, full, full];
+    return {
+      [HIT_INSET.top]: top,
+      [HIT_INSET.bottom]: bottom,
+      [HIT_INSET.inlineStart]: inlineStart,
+      [HIT_INSET.inlineEnd]: inlineEnd
+    };
+  };
   const renderThumb = thumbIndex => {
     const val = values[thumbIndex];
     const percent = getPercent(val, min, max);
-    const positionStyle = isHorizontal ? {
-      insetInlineStart: insetPosition(percent)
-    } : {
-      bottom: insetPosition(percent),
-      left: '50%'
+    const positionStyle = {
+      [THUMB_PROGRESS]: percent / 100,
+      ...(hasTouchTargets ? thumbHitInsets(thumbIndex) : null)
     };
 
     // In range mode each thumb keeps a short individual name that composes
@@ -735,9 +1008,9 @@ export function Slider({
     // than stacking two tooltips over the same thumb.
     const useValueTooltip = valueDisplay === 'tooltip' && !showsDisabledMessage;
     const tooltipPlacement = isHorizontal ? 'above' : 'start';
-    const thumbElement = /*#__PURE__*/_jsx("div", {
+    const thumbElement = trigger => /*#__PURE__*/_jsx("div", {
       ...(!isRange ? rest : undefined),
-      ref: !isRange ? ref : undefined,
+      ref: trigger != null ? trigger.ref : !isRange ? ref : undefined,
       id: !isRange ? id : undefined,
       role: "slider"
       // A disabled thumb keeps its Tab stop (spec:AST-085 FR1).
@@ -754,61 +1027,46 @@ export function Slider({
       // A caller aria-labelledby names the control together with its label.
       ,
       "aria-labelledby": !isRange ? joinAriaIDs(labelID, ariaLabelledByProp) : undefined,
-      "aria-describedby": [!isRange ? ariaDescribedByProp : undefined, ariaDescribedBy].filter(Boolean).join(' ') || undefined,
+      "aria-describedby": [!isRange ? ariaDescribedByProp : undefined, ariaDescribedBy, trigger?.describedBy].filter(Boolean).join(' ') || undefined,
       onKeyDown: after(e => handleKeyDown(thumbIndex, e), !isRange ? onKeyDown : undefined),
       onFocus: after(e => handleThumbFocus(thumbIndex, e), !isRange ? onFocus : undefined),
       onBlur: after(handleThumbBlur, !isRange ? onBlur : undefined),
       ...mergeProps(themeProps('slider-thumb', {
         orientation,
         disabled: isDisabled ? 'disabled' : null
-      }), stylex.props(styles.thumb, isHorizontal ? styles.thumbHorizontal : rtlStyles.centerInline('50%'), !isDisabled && styles.thumbHover, !isDisabled && draggingThumb === thumbIndex && styles.thumbPressed, keyboardFocusThumb === thumbIndex && focusOutlineStyles.focusVisible, isDisabled && styles.thumbDisabled), undefined, positionStyle)
+      }), stylex.props(styles.thumb, isHorizontal ? styles.thumbHorizontal : styles.thumbVertical, !isDisabled && styles.thumbHover, !isDisabled && draggingThumb === thumbIndex && styles.thumbPressed, keyboardFocusThumb === thumbIndex && focusOutlineStyles.focusVisible, isDisabled && styles.thumbDisabled, hasTouchTargets && styles.thumbHit), undefined, positionStyle)
     }, thumbIndex);
     if (useValueTooltip) {
-      return /*#__PURE__*/_jsx(Tooltip, {
+      const anchorAt = `calc(${insetPosition(percent)} - ${THUMB_SIZE / 2}px)`;
+      return /*#__PURE__*/_jsx(SliderValueTooltip, {
         content: displayValue(val),
-        placement: tooltipPlacement,
-        delay: 0,
-        focusTrigger: "always"
+        placement: tooltipPlacement
         // A drag keeps its own thumb's value showing and closes the other
         // thumb's, which a drag handed over from it may have forced open.
         ,
         isOpen: draggingThumb === null ? undefined : draggingThumb === thumbIndex,
+        anchorStyle: isHorizontal ? {
+          insetInlineStart: anchorAt,
+          top: `calc(50% - ${THUMB_SIZE / 2}px)`
+        } : {
+          bottom: anchorAt,
+          insetInlineStart: `calc(50% - ${THUMB_SIZE / 2}px)`
+        },
+        thumbRef: !isRange ? ref : undefined,
         children: thumbElement
       }, thumbIndex);
     }
-    return thumbElement;
+    return thumbElement(null);
   };
 
-  // Filled track position — ends at the thumb centre, so it uses the same
-  // inset mapping as the thumb.
-  const filledStyle = (() => {
-    if (isRange) {
-      const [v0, v1] = values;
-      const p0 = getPercent(v0, min, max);
-      const p1 = getPercent(v1, min, max);
-      if (isHorizontal) {
-        return {
-          insetInlineStart: insetPosition(p0),
-          width: insetSpan(p0, p1)
-        };
-      }
-      return {
-        bottom: insetPosition(p0),
-        height: insetSpan(p0, p1)
-      };
-    }
-    const p = getPercent(values[0], min, max);
-    if (isHorizontal) {
-      return {
-        insetInlineStart: '0%',
-        width: insetPosition(p)
-      };
-    }
-    return {
-      bottom: '0%',
-      height: insetPosition(p)
-    };
-  })();
+  // The filled range's ends as progress: it ends at the thumb centers. So it
+  // uses the same inset travel as the thumbs (see styles.fillClip).
+  const fillStart = isRange ? getPercent(values[0], min, max) / 100 : 0;
+  const fillEnd = getPercent(values[isRange ? 1 : 0], min, max) / 100;
+  const fillStyle = {
+    [FILL_START]: fillStart,
+    [FILL_END]: fillEnd
+  };
 
   // Text value display
   const textDisplay = valueDisplay === 'text' ? /*#__PURE__*/_jsx("span", {
@@ -855,7 +1113,7 @@ export function Slider({
         type: "hidden",
         name: htmlName,
         value: String(v)
-      }, i === 0 ? 'start' : 'end')), /*#__PURE__*/_jsxs("div", {
+      }, i === 0 ? 'start' : 'end')), /*#__PURE__*/_jsx("div", {
         ...(isRange ? rest : undefined),
         ...(isRange ? {
           onKeyDown,
@@ -876,75 +1134,90 @@ export function Slider({
           orientation,
           disabled: isDisabled ? 'disabled' : null
         }), stylex.props(styles.trackContainer, isHorizontal ? styles.trackContainerHorizontal : styles.trackContainerVertical, isDisabled && styles.trackContainerDisabled, controlXstyle), controlClassName, controlStyle),
-        children: [/*#__PURE__*/_jsx("div", {
-          "aria-hidden": "true",
-          ...mergeProps(themeProps('slider-track', {
-            orientation
-          }), stylex.props(styles.track, isHorizontal ? styles.trackHorizontal : [styles.trackVertical, rtlStyles.centerInline('0px')]))
-        }), /*#__PURE__*/_jsx("div", {
-          "aria-hidden": "true",
-          ...mergeProps(stylex.props(styles.filledTrack, isHorizontal ? styles.filledTrackHorizontal : [styles.filledTrackVertical, rtlStyles.centerInline('0px')]), {
-            style: filledStyle
-          })
-        }), marks && /*#__PURE__*/_jsx("div", {
-          "aria-hidden": "true",
+        children: /*#__PURE__*/_jsxs("div", {
           ...{
-            0: {
-              className: "x10l6tqk x13vifvy x1ey2m1c xbudbmw"
-            },
-            1: {
-              className: "x10l6tqk x1o0tod xtijo5x xwa60dl"
-            }
-          }[!!isHorizontal << 0],
-          children: marks.map(mark => {
-            const percent = getPercent(mark.value, min, max);
-            const markPos = isHorizontal ? {
-              insetInlineStart: insetPosition(percent)
-            } : {
-              bottom: insetPosition(percent)
-            };
-            // Marks at or inside the filled region take the fill color:
-            // at or behind the thumb in single mode, between the thumbs
-            // in range mode.
-            const isFilled = isRange ? mark.value >= values[0] && mark.value <= values[1] : mark.value <= values[0];
-            return /*#__PURE__*/_jsxs("div", {
-              children: [/*#__PURE__*/_jsx("div", {
-                "data-testid": "slider-mark",
-                "data-mark-value": mark.value,
-                ...mergeProps({
-                  0: {
-                    className: "x10l6tqk xdsb6cv xjspbzw x36qwtl x1xc55vz x1m9mm8y"
-                  },
-                  2: {
-                    className: "x10l6tqk xdsb6cv xjspbzw xfo62xy xdk7pt x11lhmoz xoffwj3"
-                  },
-                  1: {
-                    className: "x10l6tqk xjspbzw x36qwtl x1xc55vz x1m9mm8y x1ewilqj"
-                  },
-                  3: {
-                    className: "x10l6tqk xjspbzw xfo62xy xdk7pt x11lhmoz xoffwj3 x1ewilqj"
-                  }
-                }[!!isHorizontal << 1 | !!isFilled << 0], {
-                  style: markPos
+            className: "x10l6tqk x10a8y8t xpqogu8"
+          },
+          children: [/*#__PURE__*/_jsx("div", {
+            "aria-hidden": "true",
+            ...mergeProps(themeProps('slider-track', {
+              orientation
+            }), stylex.props(styles.track, isHorizontal ? styles.trackHorizontal : [styles.trackVertical, rtlStyles.centerInline('0px')]))
+          }), /*#__PURE__*/_jsx("div", {
+            "aria-hidden": "true",
+            ...stylex.props(styles.fillClip, isHorizontal ? styles.fillClipHorizontal : [styles.fillClipVertical, rtlStyles.centerInline('0px')]),
+            children: /*#__PURE__*/_jsx("div", {
+              ref: fillMoverRef,
+              ...mergeProps(stylex.props(styles.fillMover, isRange && (isHorizontal ? [styles.fillMoverRangeHorizontal, styles.fillMoverRangeStartHorizontal] : [styles.fillMoverRangeVertical, styles.fillMoverRangeStartVertical])), {
+                style: fillStyle
+              }),
+              children: /*#__PURE__*/_jsx("div", {
+                ref: fillRef,
+                ...mergeProps(stylex.props(styles.filledTrack, isHorizontal ? styles.filledTrackHorizontal : styles.filledTrackVertical, isRange ? isHorizontal ? styles.filledTrackRangeHorizontal : styles.filledTrackRangeVertical : isHorizontal ? styles.filledTrackSingleHorizontal : styles.filledTrackSingleVertical), {
+                  style: fillStyle
                 })
-              }), mark.label && /*#__PURE__*/_jsx("span", {
-                "data-testid": "slider-mark-label",
-                "data-mark-value": mark.value,
-                ...mergeProps({
-                  0: {
-                    className: "x10l6tqk x9ynric x141an7d xv1l7n4 xuxw1ft x131p8rn x9p6ekw"
-                  },
-                  1: {
-                    className: "x10l6tqk x9ynric x141an7d xv1l7n4 xuxw1ft xuuh30 x1nyx83j xuivejd"
-                  }
-                }[!!isHorizontal << 0], {
-                  style: markPos
-                }),
-                children: mark.label
-              })]
-            }, mark.value);
-          })
-        }), values.map((_, i) => renderThumb(i))]
+              })
+            })
+          }), marks && /*#__PURE__*/_jsx("div", {
+            "aria-hidden": "true",
+            ...{
+              0: {
+                className: "x10l6tqk x13vifvy x1ey2m1c xbudbmw"
+              },
+              1: {
+                className: "x10l6tqk x1o0tod xtijo5x xwa60dl"
+              }
+            }[!!isHorizontal << 0],
+            children: marks.map(mark => {
+              const percent = getPercent(mark.value, min, max);
+              const markPos = isHorizontal ? {
+                insetInlineStart: insetPosition(percent)
+              } : {
+                bottom: insetPosition(percent)
+              };
+              // Marks at or inside the filled region take the fill color:
+              // at or behind the thumb in single mode, between the thumbs
+              // in range mode.
+              const isFilled = isRange ? mark.value >= values[0] && mark.value <= values[1] : mark.value <= values[0];
+              return /*#__PURE__*/_jsxs("div", {
+                children: [/*#__PURE__*/_jsx("div", {
+                  "data-testid": "slider-mark",
+                  "data-mark-value": mark.value,
+                  ...mergeProps({
+                    0: {
+                      className: "x10l6tqk xdsb6cv xjspbzw x36qwtl x1xc55vz x1m9mm8y"
+                    },
+                    2: {
+                      className: "x10l6tqk xdsb6cv xjspbzw xfo62xy xdk7pt x11lhmoz xoffwj3"
+                    },
+                    1: {
+                      className: "x10l6tqk xjspbzw x36qwtl x1xc55vz x1m9mm8y x1ewilqj"
+                    },
+                    3: {
+                      className: "x10l6tqk xjspbzw xfo62xy xdk7pt x11lhmoz xoffwj3 x1ewilqj"
+                    }
+                  }[!!isHorizontal << 1 | !!isFilled << 0], {
+                    style: markPos
+                  })
+                }), mark.label && /*#__PURE__*/_jsx("span", {
+                  "data-testid": "slider-mark-label",
+                  "data-mark-value": mark.value,
+                  ...mergeProps({
+                    0: {
+                      className: "x10l6tqk x9ynric x141an7d xv1l7n4 xuxw1ft x131p8rn x9p6ekw"
+                    },
+                    1: {
+                      className: "x10l6tqk x9ynric x141an7d xv1l7n4 xuxw1ft xuuh30 x1nyx83j xuivejd"
+                    }
+                  }[!!isHorizontal << 0], {
+                    style: markPos
+                  }),
+                  children: mark.label
+                })]
+              }, mark.value);
+            })
+          }), values.map((_, i) => renderThumb(i))]
+        })
       }), textDisplay]
     }), conveysRequired && /*#__PURE__*/_jsx(VisuallyHidden, {
       id: requiredID,