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

package/src/Slider/Slider.tsx

@@ -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:
@@ -23,10 +23,15 @@ import {
   useRef,
   useState,
   useCallback,
+  type CSSProperties,
   type FocusEvent,
   type KeyboardEvent,
   type PointerEvent,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
 } from 'react';
+import {flushSync} from 'react-dom';
 import * as stylex from '@stylexjs/stylex';
 import {
   colorVars,
@@ -38,7 +43,6 @@ import {
   typeScaleVars,
 } from '../theme/tokens.stylex';
 import {Field} from '../Field/Field';
-import {Tooltip} from '../Tooltip/Tooltip';
 import {useTooltip} from '../Tooltip';
 import {VisuallyHidden} from '../VisuallyHidden';
 import type {InputStatus} from '../Field/types';
@@ -53,6 +57,14 @@ import {
 } from '../Field/fieldParts';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
+import {isPrimaryClick} from '../utils/primaryClick';
+import {useTouchPresentation} from '../utils/touchPresentation';
+import {slider as UIKIT_SLIDER} from '../motion/uikit/slider';
+import {
+  useSliderTouch,
+  type SliderTouchModel,
+  type SliderTouchParts,
+} from './useSliderTouch';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {useResolvedRequired} from '../hooks/useResolvedRequired';
@@ -169,6 +181,35 @@ export type SliderProps = SliderSingleProps | SliderRangeProps;
 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',
+} as const;
+/** 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.
+type ThumbStyle = React.CSSProperties &
+  Record<typeof THUMB_PROGRESS, number> &
+  Partial<Record<(typeof HIT_INSET)[keyof typeof HIT_INSET], string>>;
+type FillStyle = React.CSSProperties &
+  Record<typeof FILL_START | typeof FILL_END, number>;
+
 // =============================================================================
 // Styles
 // =============================================================================
@@ -184,10 +225,43 @@ const styles = stylex.create({
     display: 'flex',
     alignItems: 'center',
     flexGrow: 1,
-    touchAction: 'none',
+    // Under a finger (a coarse primary pointer) the control leaves the browser
+    // its pans. So a swipe from the track or across a thumb scrolls the page.
+    // The gesture host narrows that per element from the recognizers attached
+    // to it (a thumb's pan keeps its own axis) and never widens it. A held
+    // thumb's pan locks text selection and the callout until the lift. A
+    // mouse or a trackpad keeps the control's `none`.
+    touchAction: {
+      default: 'none',
+      '@media (pointer: coarse)': 'manipulation',
+    },
+    // The control's text is never selectable. WebKit applies only the
+    // prefixed property. So both are written. A held finger on the track
+    // then starts no selection either. The gesture host's lock leaves this
+    // always-on suppression as it is.
+    WebkitUserSelect: 'none',
     userSelect: 'none',
     isolation: 'isolate',
   },
+  // Every part of the control sits in this box, which fills the control's
+  // padding box. So padding on the control (a theme rule, `controlStyle`)
+  // moves no part. The thumbs and the fill travel in container units of it
+  // (`cqi` / `cqb`). Its size never depends on its content.
+  travelBox: {
+    position: 'absolute',
+    inset: 0,
+    containerType: 'size',
+  },
+  // Where layout places a thumb at its value: the value tooltip's position
+  // anchor. CSS anchor positioning reads the anchor's layout box, which the
+  // thumb's `translate` does not move in every engine. So the tooltip anchors
+  // here while hover and focus stay on the thumb.
+  valueAnchor: {
+    position: 'absolute',
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    pointerEvents: 'none',
+  },
   trackContainerHorizontal: {
     height: THUMB_SIZE,
     // The whole track is the tap target (a click anywhere on it moves the
@@ -246,26 +320,95 @@ const styles = stylex.create({
     bottom: 0,
     width: TRACK_SIZE,
   },
-  filledTrack: {
+  // The filled range is a full-length bar moved into place inside two
+  // clips, so it travels by translate alone. The clip has the track's shape
+  // and rounds the start of a single slider's fill. The mover's start edge
+  // cuts the fill at the range's start, and the fill's own end sits at the
+  // range's end. Both ends of a range hide under its thumbs.
+  fillClip: {
     position: 'absolute',
-    backgroundColor: colorVars['--color-accent'],
+    overflow: 'hidden',
     borderRadius: radiusVars['--radius-full'],
+    pointerEvents: 'none',
   },
-  filledTrackHorizontal: {
+  fillClipHorizontal: {
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
     height: TRACK_SIZE,
     top: '50%',
     transform: 'translateY(-50%)',
   },
-  filledTrackVertical: {
+  fillClipVertical: {
+    top: 0,
+    bottom: 0,
     width: TRACK_SIZE,
   },
+  fillMover: {
+    position: 'absolute',
+    inset: 0,
+    overflow: 'hidden',
+  },
+  // A range's start is round, like the track's ends (the clip already
+  // rounds a single slider's start). It shows through a disabled thumb's
+  // translucent fill.
+  fillMoverRangeStartHorizontal: {
+    borderStartStartRadius: radiusVars['--radius-full'],
+    borderEndStartRadius: radiusVars['--radius-full'],
+  },
+  fillMoverRangeStartVertical: {
+    borderEndStartRadius: radiusVars['--radius-full'],
+    borderEndEndRadius: radiusVars['--radius-full'],
+  },
+  fillMoverRangeHorizontal: {
+    translate: {
+      default: `calc(${THUMB_INSET_PX}px + var(${FILL_START}) * (100cqi - ${THUMB_SIZE}px)) 0`,
+      ':dir(rtl)': `calc(-${THUMB_INSET_PX}px - var(${FILL_START}) * (100cqi - ${THUMB_SIZE}px)) 0`,
+    },
+  },
+  fillMoverRangeVertical: {
+    translate: `0 calc(-${THUMB_INSET_PX}px - var(${FILL_START}) * (100cqb - ${THUMB_SIZE}px))`,
+  },
+  filledTrack: {
+    position: 'absolute',
+    inset: 0,
+    backgroundColor: colorVars['--color-accent'],
+  },
+  // The fill's end is round too, under the thumb.
+  filledTrackHorizontal: {
+    borderStartEndRadius: radiusVars['--radius-full'],
+    borderEndEndRadius: radiusVars['--radius-full'],
+  },
+  filledTrackVertical: {
+    borderStartStartRadius: radiusVars['--radius-full'],
+    borderStartEndRadius: radiusVars['--radius-full'],
+  },
+  // A single slider's fill runs from the track's start to the thumb's center.
+  filledTrackSingleHorizontal: {
+    translate: {
+      default: `calc(${THUMB_INSET_PX}px + var(${FILL_END}) * (100cqi - ${THUMB_SIZE}px) - 100cqi) 0`,
+      ':dir(rtl)': `calc(100cqi - ${THUMB_INSET_PX}px - var(${FILL_END}) * (100cqi - ${THUMB_SIZE}px)) 0`,
+    },
+  },
+  filledTrackSingleVertical: {
+    translate: `0 calc(100cqb - ${THUMB_INSET_PX}px - var(${FILL_END}) * (100cqb - ${THUMB_SIZE}px))`,
+  },
+  // A range's fill runs from the lower thumb's center to the upper's. The
+  // mover already sits at the lower one.
+  filledTrackRangeHorizontal: {
+    translate: {
+      default: `calc((var(${FILL_END}) - var(${FILL_START})) * (100cqi - ${THUMB_SIZE}px) - 100cqi) 0`,
+      ':dir(rtl)': `calc(100cqi - (var(${FILL_END}) - var(${FILL_START})) * (100cqi - ${THUMB_SIZE}px)) 0`,
+    },
+  },
+  filledTrackRangeVertical: {
+    translate: `0 calc(100cqb - (var(${FILL_END}) - var(${FILL_START})) * (100cqb - ${THUMB_SIZE}px))`,
+  },
   thumb: {
     position: 'absolute',
     width: THUMB_SIZE,
     height: THUMB_SIZE,
     borderRadius: radiusVars['--radius-full'],
     backgroundColor: colorVars['--color-accent'],
-    transform: 'translate(-50%, -50%)',
     transitionProperty: 'background-color, box-shadow',
     transitionDuration: {
       default: durationVars['--duration-fast'],
@@ -280,16 +423,42 @@ const styles = stylex.create({
     zIndex: 1,
   },
   thumbHorizontal: {
-    top: '50%',
-    // The thumb is positioned via logical `insetInlineStart`, which resolves
-    // from the right edge under RTL. The centering translate is a physical
-    // (screen-space) transform, so it must flip its X direction under RTL to
-    // keep the thumb centered on the value point.
-    transform: {
-      default: 'translate(-50%, -50%)',
-      ':is([dir="rtl"] *)': 'translate(50%, -50%)',
+    // Centered by its offset, not by a transform: the touch lift scales the
+    // thumb (`scale`), and CSS applies `transform` inside `scale`. So a
+    // centering translate would grow with it and lift the thumb off the
+    // track. UISlider's lens grows around its center.
+    top: `calc(50% - ${THUMB_SIZE / 2}px)`,
+    insetInlineStart: 0,
+    // The thumb starts at the track's inline start (the right edge under
+    // RTL). It travels by its progress along the track minus its own size,
+    // so its center lands where `insetPosition` places the fill and the
+    // marks. `translate` is physical, so it flips its sign under RTL.
+    translate: {
+      default: `calc(var(${THUMB_PROGRESS}) * (100cqi - ${THUMB_SIZE}px)) 0`,
+      ':dir(rtl)': `calc(var(${THUMB_PROGRESS}) * (${THUMB_SIZE}px - 100cqi)) 0`,
+    },
+  },
+  // A thumb's touch target under a finger (UISlider's hit area): the thumb's
+  // own `::before`, invisible and centered on it, larger than it. So a touch
+  // presentation renders no more elements than a mouse one. Each side grows
+  // by the inset `thumbHitInsets` sets on the thumb.
+  thumbHit: {
+    '::before': {
+      content: '""',
+      position: 'absolute',
+      top: `var(${HIT_INSET.top})`,
+      bottom: `var(${HIT_INSET.bottom})`,
+      insetInlineStart: `var(${HIT_INSET.inlineStart})`,
+      insetInlineEnd: `var(${HIT_INSET.inlineEnd})`,
     },
   },
+  thumbVertical: {
+    bottom: 0,
+    // Centered by its offset (see thumbHorizontal): the same in both
+    // directions, since the thumb is symmetric.
+    insetInlineStart: `calc(50% - ${THUMB_SIZE / 2}px)`,
+    translate: `0 calc(var(${THUMB_PROGRESS}) * (${THUMB_SIZE}px - 100cqb))`,
+  },
   thumbHover: {
     backgroundColor: {
       default: colorVars['--color-accent'],
@@ -439,12 +608,6 @@ function insetPosition(percent: number): string {
   return cssLength(percent, THUMB_INSET - (percent / 100) * THUMB_SIZE);
 }
 
-/** Distance between two inset positions; the inset itself cancels out. */
-function insetSpan(fromPercent: number, toPercent: number): string {
-  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: number, size: number): number {
   const travel = size - THUMB_SIZE;
@@ -463,6 +626,51 @@ function cssLength(percent: number, px: number): string {
   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,
+}: {
+  content: ReactNode;
+  placement: 'above' | 'start';
+  isOpen: boolean | undefined;
+  anchorStyle: CSSProperties;
+  thumbRef: Ref<HTMLDivElement> | undefined;
+  children: (trigger: {
+    ref: Ref<HTMLDivElement>;
+    describedBy: string;
+  }) => ReactElement;
+}): ReactElement {
+  const tooltip = useTooltip({
+    placement,
+    delay: 0,
+    focusTrigger: 'always',
+    isOpen,
+  });
+  const triggerRef = useMergedRefs<HTMLDivElement>(
+    thumbRef,
+    tooltip.interactionRef,
+  );
+  return (
+    <>
+      <span
+        aria-hidden="true"
+        ref={tooltip.positionRef}
+        {...mergeProps(stylex.props(styles.valueAnchor), {style: anchorStyle})}
+      />
+      {children({ref: triggerRef, describedBy: tooltip.describedBy})}
+      {tooltip.renderTooltip(content)}
+    </>
+  );
+}
+
 // =============================================================================
 // Component
 // =============================================================================
@@ -551,9 +759,19 @@ export function Slider({ref, ...props}: SliderProps) {
   const requiredID = useId();
 
   const trackRef = useRef<HTMLDivElement>(null);
+  const fillMoverRef = useRef<HTMLDivElement>(null);
+  const fillRef = useRef<HTMLDivElement>(null);
   const draggingThumbRef = useRef<number | null>(null);
   const [draggingThumb, setDraggingThumb] = useState<number | null>(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`
@@ -578,7 +796,7 @@ export function Slider({ref, ...props}: SliderProps) {
   }, []);
 
   // 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.
@@ -799,6 +1017,27 @@ export function Slider({ref, ...props}: SliderProps) {
       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 as Element).closest<HTMLElement>(
+        '[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;
@@ -959,6 +1198,105 @@ export function Slider({ref, ...props}: SliderProps) {
     [endDrag],
   );
 
+  // The touch presentation's value model (useSliderTouch reads it fresh).
+  const updateValueRef = useRef(updateValue);
+  updateValueRef.current = updateValue;
+  const touchModel: SliderTouchModel = {
+    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<HTMLElement>('[role="slider"]');
+      const active = trackRef.current?.ownerDocument.activeElement;
+      if (index != null && thumbs != null && active != null) {
+        const list = Array.from(thumbs);
+        if (list.includes(active as HTMLElement) && 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<HTMLElement>('[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: (): SliderTouchParts | null => {
+      const control = trackRef.current;
+      if (control == null) {
+        return null;
+      }
+      return {
+        control,
+        thumbs: Array.from(
+          control.querySelectorAll<HTMLElement>('[role="slider"]'),
+        ),
+        fillMover: fillMoverRef.current,
+        fill: fillRef.current,
+      };
+    },
+  });
+
   // Keyboard handler
   const handleKeyDown = useCallback(
     (thumbIndex: number, e: KeyboardEvent<HTMLDivElement>) => {
@@ -1069,13 +1407,42 @@ export function Slider({ref, ...props}: SliderProps) {
   };
 
   // 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: number) => {
+    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: number) => {
     const val = values[thumbIndex];
     const percent = getPercent(val, min, max);
 
-    const positionStyle = isHorizontal
-      ? {insetInlineStart: insetPosition(percent)}
-      : {bottom: insetPosition(percent), left: '50%'};
+    const positionStyle: ThumbStyle = {
+      [THUMB_PROGRESS]: percent / 100,
+      ...(hasTouchTargets ? thumbHitInsets(thumbIndex) : null),
+    };
 
     // In range mode each thumb keeps a short individual name that composes
     // with the group label (announced via the group's aria-labelledby), per
@@ -1104,10 +1471,12 @@ export function Slider({ref, ...props}: SliderProps) {
     const tooltipPlacement = isHorizontal ? 'above' : 'start';
 
     const thumbElement = (
+      trigger: {ref: Ref<HTMLDivElement>; describedBy: string} | null,
+    ) => (
       <div
         key={thumbIndex}
         {...(!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).
@@ -1125,7 +1494,11 @@ export function Slider({ref, ...props}: SliderProps) {
           !isRange ? joinAriaIDs(labelID, ariaLabelledByProp) : undefined
         }
         aria-describedby={
-          [!isRange ? ariaDescribedByProp : undefined, ariaDescribedBy]
+          [
+            !isRange ? ariaDescribedByProp : undefined,
+            ariaDescribedBy,
+            trigger?.describedBy,
+          ]
             .filter(Boolean)
             .join(' ') || undefined
         }
@@ -1145,14 +1518,13 @@ export function Slider({ref, ...props}: SliderProps) {
           }),
           stylex.props(
             styles.thumb,
-            isHorizontal
-              ? styles.thumbHorizontal
-              : rtlStyles.centerInline('50%'),
+            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,
@@ -1161,44 +1533,42 @@ export function Slider({ref, ...props}: SliderProps) {
     );
 
     if (useValueTooltip) {
+      const anchorAt = `calc(${insetPosition(percent)} - ${THUMB_SIZE / 2}px)`;
       return (
-        <Tooltip
+        <SliderValueTooltip
           key={thumbIndex}
           content={displayValue(val)}
           placement={tooltipPlacement}
-          delay={0}
-          focusTrigger="always"
           // 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}>
           {thumbElement}
-        </Tooltip>
+        </SliderValueTooltip>
       );
     }
 
-    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: FillStyle = {[FILL_START]: fillStart, [FILL_END]: fillEnd};
 
   // Text value display
   const textDisplay =
@@ -1305,95 +1675,132 @@ export function Slider({ref, ...props}: SliderProps) {
             controlClassName,
             controlStyle,
           )}>
-          {/* Background track */}
-          <div
-            aria-hidden="true"
-            {...mergeProps(
-              themeProps('slider-track', {orientation}),
-              stylex.props(
-                styles.track,
-                isHorizontal
-                  ? styles.trackHorizontal
-                  : [styles.trackVertical, rtlStyles.centerInline('0px')],
-              ),
-            )}
-          />
-
-          {/* Filled track */}
-          <div
-            aria-hidden="true"
-            {...mergeProps(
-              stylex.props(
-                styles.filledTrack,
-                isHorizontal
-                  ? styles.filledTrackHorizontal
-                  : [styles.filledTrackVertical, rtlStyles.centerInline('0px')],
-              ),
-              {style: filledStyle},
-            )}
-          />
+          <div {...stylex.props(styles.travelBox)}>
+            {/* Background track */}
+            <div
+              aria-hidden="true"
+              {...mergeProps(
+                themeProps('slider-track', {orientation}),
+                stylex.props(
+                  styles.track,
+                  isHorizontal
+                    ? styles.trackHorizontal
+                    : [styles.trackVertical, rtlStyles.centerInline('0px')],
+                ),
+              )}
+            />
 
-          {/* Marks */}
-          {marks && (
+            {/* Filled track */}
             <div
               aria-hidden="true"
               {...stylex.props(
-                styles.marksContainer,
+                styles.fillClip,
                 isHorizontal
-                  ? styles.marksContainerHorizontal
-                  : styles.marksContainerVertical,
+                  ? styles.fillClipHorizontal
+                  : [styles.fillClipVertical, rtlStyles.centerInline('0px')],
               )}>
-              {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 (
-                  <div key={mark.value}>
-                    <div
-                      data-testid="slider-mark"
-                      data-mark-value={mark.value}
-                      {...mergeProps(
-                        stylex.props(
-                          styles.mark,
-                          isHorizontal
-                            ? styles.markHorizontal
-                            : styles.markVertical,
-                          isFilled && styles.markFilled,
-                        ),
-                        {style: markPos},
-                      )}
-                    />
-                    {mark.label && (
-                      <span
-                        data-testid="slider-mark-label"
+              <div
+                ref={fillMoverRef}
+                {...mergeProps(
+                  stylex.props(
+                    styles.fillMover,
+                    isRange &&
+                      (isHorizontal
+                        ? [
+                            styles.fillMoverRangeHorizontal,
+                            styles.fillMoverRangeStartHorizontal,
+                          ]
+                        : [
+                            styles.fillMoverRangeVertical,
+                            styles.fillMoverRangeStartVertical,
+                          ]),
+                  ),
+                  {style: fillStyle},
+                )}>
+                <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},
+                  )}
+                />
+              </div>
+            </div>
+
+            {/* Marks */}
+            {marks && (
+              <div
+                aria-hidden="true"
+                {...stylex.props(
+                  styles.marksContainer,
+                  isHorizontal
+                    ? styles.marksContainerHorizontal
+                    : styles.marksContainerVertical,
+                )}>
+                {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 (
+                    <div key={mark.value}>
+                      <div
+                        data-testid="slider-mark"
                         data-mark-value={mark.value}
                         {...mergeProps(
                           stylex.props(
-                            styles.markLabel,
+                            styles.mark,
                             isHorizontal
-                              ? styles.markLabelHorizontal
-                              : styles.markLabelVertical,
+                              ? styles.markHorizontal
+                              : styles.markVertical,
+                            isFilled && styles.markFilled,
                           ),
                           {style: markPos},
-                        )}>
-                        {mark.label}
-                      </span>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          )}
+                        )}
+                      />
+                      {mark.label && (
+                        <span
+                          data-testid="slider-mark-label"
+                          data-mark-value={mark.value}
+                          {...mergeProps(
+                            stylex.props(
+                              styles.markLabel,
+                              isHorizontal
+                                ? styles.markLabelHorizontal
+                                : styles.markLabelVertical,
+                            ),
+                            {style: markPos},
+                          )}>
+                          {mark.label}
+                        </span>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
 
-          {/* Thumbs */}
-          {values.map((_, i) => renderThumb(i))}
+            {/* Thumbs */}
+            {values.map((_, i) => renderThumb(i))}
+          </div>
         </div>
 
         {textDisplay}