@multiplatform.one/forms 6.7.0 → 7.1.0

package/src/fields/Slider/index.tsx

@@ -4,16 +4,24 @@ import type { LabelProps, SizeTokens } from "tamagui";
 import {
   type SliderProps as TamaguiSliderProps,
   Slider as TamaguiSlider,
+  Paragraph,
   View,
   XStack,
   isWeb,
   styled,
   useTheme,
 } from "tamagui";
-import { animationConfig, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  animationConfig,
+  ensureFocusVisibleRing,
+  ensureKeyboardModalityTracking,
+  useReadableTextOn,
+  useResolvedKnobs,
+  wasKeyboardFocus,
+} from "@multiplatform.one/theme";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout";
-import { formControlColors } from "../../shared/colorRamps";
+import { formCommonColors, formControlColors, formSelectedColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import {
   getElevationWrapperProps,
@@ -30,9 +38,19 @@ import {
   useSliderJumpMotion,
 } from "./jumpMotion";
 
+/**
+ * Visual rail height. Spectrum ~3px, Apple ~4pt; Material's 16dp track is a
+ * density class of its own. House skeleton already paints 6px — match it so
+ * loading and loaded share one rail.
+ */
+const TRACK_HEIGHT = 6;
+
 // Track styling helper - returns props to pass to TamaguiSlider.Track
 const getTrackProps = (outlined: boolean | undefined, borderRadius: number | string) => ({
-  unstyled: false, // Ensure track gets default Tamagui dimensions (height/width 100%)
+  unstyled: false,
+  height: TRACK_HEIGHT,
+  width: "100%",
+  alignSelf: "center" as const,
   backgroundColor: outlined ? "transparent" : formControlColors.background,
   borderWidth: outlined ? 1 : 0,
   borderColor: outlined ? formControlColors.border : undefined,
@@ -41,18 +59,23 @@ const getTrackProps = (outlined: boolean | undefined, borderRadius: number | str
 
 /** Single source for the thumb size: styled default + native jump-delta math. */
 const THUMB_SIZE_TOKEN = "$1.5";
+const THUMB_RENDER_SIZE = getSliderThumbRenderSize(THUMB_SIZE_TOKEN);
 
 const SliderThumbFrame = styled(TamaguiSlider.Thumb, {
   size: THUMB_SIZE_TOKEN,
+  width: THUMB_RENDER_SIZE,
+  height: THUMB_RENDER_SIZE,
   // LC-04 SOLID-THUMB: the thumb is a solid physical handle lifted off the
   // track by a subtle drop shadow (same values as the Switch thumb) — never a
-  // border. Single overhead light source (y:blur 0.5 per the OPTICS audit).
+  // border. Tamagui's Thumb defaults `borderWidth: 2`; pin 0 here AND on the
+  // instance so the inverse SliderThumb sub-theme cannot restore a ring.
   borderWidth: 0,
-  backgroundColor: formControlColors.thumb.base,
-  hoverStyle: { backgroundColor: formControlColors.thumb.hover },
-  pressStyle: { backgroundColor: formControlColors.thumb.press },
+  borderColor: "transparent",
   ...(isWeb
-    ? { boxShadow: "0 1px 2px rgba(0,0,0,0.18), 0 0 1px rgba(0,0,0,0.12)" }
+    ? {
+        cursor: "grab",
+        boxShadow: "0 1px 2px rgba(0,0,0,0.18), 0 0 1px rgba(0,0,0,0.12)",
+      }
     : {
         shadowColor: "#000",
         shadowOffset: { width: 0, height: 1 },
@@ -62,6 +85,13 @@ const SliderThumbFrame = styled(TamaguiSlider.Thumb, {
       }),
 });
 
+function formatSliderOutput(values: number[], step: number): string {
+  const decimals = (String(step).split(".")[1] || "").length;
+  const fmt = (n: number) => (decimals ? n.toFixed(decimals) : String(n));
+  if (values.length <= 1) return fmt(values[0] ?? 0);
+  return `${fmt(values[0] ?? 0)}–${fmt(values[values.length - 1] ?? 0)}`;
+}
+
 const JUMP_KEYS = new Set([
   "Home",
   "End",
@@ -117,7 +147,7 @@ export interface SliderProps {
   >;
   /** When true, renders a skeleton placeholder instead of the slider */
   skeleton?: boolean;
-  /** When true, uses compact sizing */
+  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
   compact?: boolean;
   "aria-label"?: string;
 }
@@ -187,6 +217,7 @@ function SliderControl({
 }: SliderControlProps) {
   const describedBy = useFieldDescribedBy();
   const { disabledState } = useResolvedKnobs();
+  if (isWeb) ensureKeyboardModalityTracking();
   // DG-A11Y-01: the thumb renders inside tamagui's t_SliderThumb component
   // sub-theme, an INVERSE template whose `$outlineColor` clears 3:1 against
   // its own (inverted) surfaces — but the ring draws on the parent surface,
@@ -194,13 +225,23 @@ function SliderControl({
   // field's scope instead and pin the LITERAL on the thumb (`.val`, not
   // `.get()` — the CSS var re-resolves inside the sub-theme).
   const fieldTheme = useTheme();
-  const thumbFocusRing = {
-    outlineWidth: 2,
-    outlineStyle: "solid" as const,
+  const thumbFocusRing = ensureFocusVisibleRing({
     outlineColor: (fieldTheme.outlineColor?.val as string | undefined) ?? "$outlineColor",
     outlineOffset: 2,
-  };
+  });
+  // Apple/Material/Spectrum: the filled rail is the value (accent). Pin the
+  // literal so Tamagui's SliderActive sub-theme cannot remap `$accentBackground`
+  // onto a gray that matches the inactive track (the before-state defect).
+  const fillToken = hasError ? formCommonColors.error : formSelectedColors.mark;
+  const fillKey = fillToken.startsWith("$") ? fillToken.slice(1) : fillToken;
+  const fillLiteral =
+    (fieldTheme[fillKey as keyof typeof fieldTheme]?.val as string | undefined) || fillToken;
+  // LC-04: paper vs ink on the ACTUAL fill, computed at field scope so the
+  // inverse SliderThumb template cannot flip the handle to a same-lightness disc.
+  const thumbColor = useReadableTextOn(fillLiteral);
   const [animateJump, setAnimateJump] = useState(false);
+  const [kbThumb, setKbThumb] = useState<number | null>(null);
+  const [displayValues, setDisplayValues] = useState<number[]>(sliderValue);
   const sessionRef = useRef<"idle" | "drag" | "jump">("idle");
   const jumpClearRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const paintedRef = useRef(false);
@@ -219,10 +260,7 @@ function SliderControl({
   // UNSHIFTED size token and wins over the size variant's shift -1; see
   // getSliderThumbRenderSize). Using the shifted token here put the base-x
   // replica 1-4pt off the true rendered position.
-  const thumbSize = useMemo(
-    () => getSliderThumbRenderSize(THUMB_SIZE_TOKEN, !isSquare),
-    [isSquare],
-  );
+  const thumbSize = useMemo(() => getSliderThumbRenderSize(THUMB_SIZE_TOKEN), []);
   const jumpMotionEnabled =
     !isWeb && sliderProps?.orientation !== "vertical" && sliderProps?.dir !== "rtl";
   const jumpMotion = useSliderJumpMotion({
@@ -308,6 +346,7 @@ function SliderControl({
     // A genuine external value change: adopt it as the current value and
     // release any VoiceOver-held value override (native only).
     currentValuesRef.current = sliderValue;
+    setDisplayValues(sliderValue);
     if (!isWeb) {
       setNativeValues(sliderValue);
       setA11yValues(null);
@@ -332,7 +371,8 @@ function SliderControl({
 
   const trackActive = (
     <TamaguiSlider.TrackActive
-      backgroundColor={formControlColors.border}
+      backgroundColor={fillLiteral}
+      height="100%"
       // The fill rides the same radius as the track it sits in: without it
       // tamagui's default left a pill fill inside a square track at
       // `borderRadius:none` — an undeclared knob-immune shape (D-09 / LC-60).
@@ -340,191 +380,249 @@ function SliderControl({
       transition={transitionProp}
     />
   );
+  const hitHeight = size || sizeToken;
+  const thumbFill = thumbColor ?? formControlColors.thumb.base;
 
   return (
     <XStack
-      height={size || sizeToken}
+      height={hitHeight}
       alignItems="center"
       width="100%"
-      onLayout={(event) => {
-        trackWidthRef.current = event.nativeEvent.layout.width;
-      }}
+      gap="$3"
+      // LC-40 DISABLED-VISIBLE: track+thumb+output are text-free chrome —
+      // dim the whole control while the sibling label/helper stay readable.
+      {...(disabled ? disabledState.chromeKnobProps : undefined)}
     >
-      <TamaguiSlider
-        size={sizeToken}
-        width="100%"
-        {...sliderProps}
-        disabled={disabled}
-        // LC-40 DISABLED-VISIBLE: track+thumb are text-free chrome — dim the
-        // whole slider while the sibling label/helper stay readable.
-        {...(disabled ? disabledState.chromeKnobProps : undefined)}
-        {...(readOnly ? { pointerEvents: "none" as const } : undefined)}
-        id={id}
-        // Controlled when an upstream value drives the slider (value prop /
-        // field state) — mount-only `defaultValue` froze late-arriving values
-        // (create-mode seeding). Uncontrolled standalone keeps defaultValue.
-        // Tamagui's prop-wins controllable state adopts a late prop without
-        // firing onValueChange (LC-14). Same split as ToggleGroup.
-        {...(controlled ? { value: sliderValue } : { defaultValue: sliderValue })}
-        // Native only: while VoiceOver adjusts the value the slider runs
-        // controlled (tamagui syncs its internal state to the prop), and the
-        // next touch gesture releases it back to uncontrolled seamlessly.
-        {...(!isWeb && a11yValues ? { value: a11yValues } : undefined)}
-        min={min}
-        max={max}
-        step={step}
-        onSlideStart={(_event, value, target) => {
-          if (disabled || readOnly) return;
-          if (!isWeb && a11yValues) setA11yValues(null);
-          if (target === "track") {
-            jumpMotion.onTrackPress(value);
-            armJump();
-          } else {
-            jumpMotion.onDragStart();
-            sessionRef.current = "drag";
-            clearJumpTimer();
-            setAnimateJump(false);
-          }
-        }}
-        onSlideEnd={() => {
-          if (!isWeb) setNativeValues(currentValuesRef.current);
-          if (sessionRef.current === "drag") {
-            sessionRef.current = "idle";
-            ignoreJumpUntilRef.current = Date.now() + 50;
-          }
-        }}
-        onKeyDown={(event: KeyboardEvent) => {
-          if (disabled || readOnly) return;
-          if (JUMP_KEYS.has(event.key)) {
-            armJump();
-          }
+      <View
+        flex={1}
+        minWidth={0}
+        height="100%"
+        justifyContent="center"
+        onLayout={(event) => {
+          trackWidthRef.current = event.nativeEvent.layout.width;
         }}
-        onValueChange={(values) => {
-          // Position tracking first: the jump/drag machine must see every
-          // internal value even when the value-emit below is gated.
-          jumpMotion.onInternalValueChange(values);
-          currentValuesRef.current = values;
-          // Keep announcements fresh without re-rendering per drag move.
-          if (!isWeb && sessionRef.current !== "drag") {
-            setNativeValues(values);
-          }
-          if (disabled) return;
-          onChangeValues?.(values);
-        }}
-        {...(onBlur ? { onBlur } : undefined)}
-        aria-required={required || undefined}
-        aria-invalid={hasError || undefined}
-        aria-readonly={readOnly || undefined}
-        aria-label={ariaLabel}
-        aria-labelledby={!ariaLabel && hasLabel ? `${id}-label` : undefined}
-        aria-describedby={describedBy}
       >
-        {elevationWrapperProps.elevation ? (
-          <View {...elevationWrapperProps} width="100%" height="100%" borderRadius={borderRadius}>
+        <TamaguiSlider
+          size={sizeToken}
+          width="100%"
+          {...sliderProps}
+          disabled={disabled}
+          {...(readOnly ? { pointerEvents: "none" as const } : undefined)}
+          id={id}
+          // Controlled when an upstream value drives the slider (value prop /
+          // field state) — mount-only `defaultValue` froze late-arriving values
+          // (create-mode seeding). Uncontrolled standalone keeps defaultValue.
+          // Tamagui's prop-wins controllable state adopts a late prop without
+          // firing onValueChange (LC-14). Same split as ToggleGroup.
+          {...(controlled ? { value: sliderValue } : { defaultValue: sliderValue })}
+          // Native only: while VoiceOver adjusts the value the slider runs
+          // controlled (tamagui syncs its internal state to the prop), and the
+          // next touch gesture releases it back to uncontrolled seamlessly.
+          {...(!isWeb && a11yValues ? { value: a11yValues } : undefined)}
+          min={min}
+          max={max}
+          step={step}
+          onPointerDown={(event) => {
+            // LC-71: any pointer session (click, track press, thumb drag)
+            // drops the keyboard ring. Tab-then-drag used to keep :focus-visible
+            // because the thumb never blurs.
+            if (isWeb) setKbThumb(null);
+            sliderProps?.onPointerDown?.(event);
+          }}
+          onSlideStart={(_event, value, target) => {
+            if (disabled || readOnly) return;
+            if (isWeb) setKbThumb(null);
+            if (!isWeb && a11yValues) setA11yValues(null);
+            if (target === "track") {
+              jumpMotion.onTrackPress(value);
+              armJump();
+            } else {
+              jumpMotion.onDragStart();
+              sessionRef.current = "drag";
+              clearJumpTimer();
+              setAnimateJump(false);
+            }
+          }}
+          onSlideEnd={() => {
+            if (!isWeb) setNativeValues(currentValuesRef.current);
+            if (sessionRef.current === "drag") {
+              sessionRef.current = "idle";
+              ignoreJumpUntilRef.current = Date.now() + 50;
+            }
+          }}
+          onKeyDown={(event: KeyboardEvent) => {
+            if (disabled || readOnly) return;
+            if (JUMP_KEYS.has(event.key)) {
+              armJump();
+            }
+          }}
+          onValueChange={(values) => {
+            // Position tracking first: the jump/drag machine must see every
+            // internal value even when the value-emit below is gated.
+            jumpMotion.onInternalValueChange(values);
+            currentValuesRef.current = values;
+            setDisplayValues(values);
+            // Keep announcements fresh without re-rendering per drag move.
+            if (!isWeb && sessionRef.current !== "drag") {
+              setNativeValues(values);
+            }
+            if (disabled) return;
+            onChangeValues?.(values);
+          }}
+          {...(onBlur ? { onBlur } : undefined)}
+          aria-required={required || undefined}
+          aria-invalid={hasError || undefined}
+          aria-readonly={readOnly || undefined}
+          aria-label={ariaLabel}
+          // Labelled: the sibling Label wires `aria-labelledby` onto this id
+          // itself — naming it here too doubles the spoken name.
+          aria-describedby={describedBy}
+        >
+          {elevationWrapperProps.elevation ? (
+            <View {...elevationWrapperProps} width="100%" height="100%" borderRadius={borderRadius}>
+              <TamaguiSlider.Track {...getTrackProps(outlined, borderRadius)}>
+                {trackActive}
+              </TamaguiSlider.Track>
+            </View>
+          ) : (
             <TamaguiSlider.Track {...getTrackProps(outlined, borderRadius)}>
               {trackActive}
             </TamaguiSlider.Track>
-          </View>
-        ) : (
-          <TamaguiSlider.Track {...getTrackProps(outlined, borderRadius)}>
-            {trackActive}
-          </TamaguiSlider.Track>
-        )}
-        {sliderValue.map((_thumbValue, thumbIndex) => {
-          // Per-thumb accessible names (values are announced via the
-          // aria-valuenow the thumb already carries). Range sliders name each
-          // thumb "Minimum"/"Maximum" (prefixed with the field label context)
-          // — a labelledby pointing at the shared field label would make all
-          // thumbs announce identically, so it is dropped when a per-thumb
-          // label exists (aria-labelledby otherwise wins name computation).
-          const isRange = sliderValue.length > 1;
-          const labelContext = ariaLabel ?? labelText;
-          const positionLabel =
-            thumbIndex === 0
-              ? t("Minimum")
-              : thumbIndex === sliderValue.length - 1
-                ? t("Maximum")
-                : t("Value {{number}}", { number: thumbIndex + 1 });
-          const thumbLabel = isRange
-            ? labelContext
-              ? `${labelContext} ${positionLabel}`
-              : positionLabel
-            : (ariaLabel ?? labelText ?? (hasLabel ? undefined : t("Slider")));
-          const thumbA11y = {
-            "aria-label": thumbLabel,
-            "aria-labelledby": !thumbLabel && hasLabel ? `${id}-label` : undefined,
-            "aria-describedby": describedBy,
-          };
-          // Native mirror of the web aria wiring: an "adjustable" element per
-          // thumb with the accessible name (id-based aria-labelledby has no
-          // native equivalent, so the label string comes from the field a11y
-          // context), current value, helper/error hint, and step actions.
-          const thumbValueNow =
-            (a11yValues ?? nativeValues)[thumbIndex] ?? sliderValue[thumbIndex] ?? min;
-          const nativeThumbA11y = isWeb
-            ? undefined
-            : {
-                accessible: true,
-                // Tamagui's Thumb sets role="slider" (web semantics); on this
-                // RN version it shadows accessibilityRole without mapping to
-                // the iOS adjustable trait — clear it so the trait applies.
-                role: undefined,
-                accessibilityRole: "adjustable" as const,
-                accessibilityLabel: thumbLabel ?? fieldA11y?.label ?? t("Slider"),
-                accessibilityHint: fieldA11y?.description,
-                accessibilityValue: {
-                  min,
-                  max,
-                  now: thumbValueNow,
-                  text: String(thumbValueNow),
-                },
-                accessibilityState: { disabled: !!disabled },
-                accessibilityActions: A11Y_ADJUSTABLE_ACTIONS,
-                onAccessibilityAction: (event: { nativeEvent: { actionName: string } }) => {
-                  if (event.nativeEvent.actionName === "increment") {
-                    handleA11yAdjust(thumbIndex, 1);
-                  } else if (event.nativeEvent.actionName === "decrement") {
-                    handleA11yAdjust(thumbIndex, -1);
+          )}
+          {sliderValue.map((_thumbValue, thumbIndex) => {
+            // Per-thumb accessible names (values are announced via the
+            // aria-valuenow the thumb already carries). Range sliders name each
+            // thumb "Minimum"/"Maximum" (prefixed with the field label context)
+            // — a labelledby pointing at the shared field label would make all
+            // thumbs announce identically, so it is dropped when a per-thumb
+            // label exists (aria-labelledby otherwise wins name computation).
+            const isRange = sliderValue.length > 1;
+            const labelContext = ariaLabel ?? labelText;
+            const positionLabel =
+              thumbIndex === 0
+                ? t("Minimum")
+                : thumbIndex === sliderValue.length - 1
+                  ? t("Maximum")
+                  : t("Value {{number}}", { number: thumbIndex + 1 });
+            const thumbLabel = isRange
+              ? labelContext
+                ? `${labelContext} ${positionLabel}`
+                : positionLabel
+              : (ariaLabel ?? labelText ?? (hasLabel ? undefined : t("Slider")));
+            const thumbA11y = {
+              "aria-label": thumbLabel,
+              "aria-labelledby": !thumbLabel && hasLabel ? `${id}-label` : undefined,
+              "aria-describedby": describedBy,
+            };
+            // Native mirror of the web aria wiring: an "adjustable" element per
+            // thumb with the accessible name (id-based aria-labelledby has no
+            // native equivalent, so the label string comes from the field a11y
+            // context), current value, helper/error hint, and step actions.
+            const thumbValueNow =
+              (a11yValues ?? nativeValues)[thumbIndex] ?? sliderValue[thumbIndex] ?? min;
+            const nativeThumbA11y = isWeb
+              ? undefined
+              : {
+                  accessible: true,
+                  // Tamagui's Thumb sets role="slider" (web semantics); on this
+                  // RN version it shadows accessibilityRole without mapping to
+                  // the iOS adjustable trait — clear it so the trait applies.
+                  role: undefined,
+                  accessibilityRole: "adjustable" as const,
+                  accessibilityLabel: thumbLabel ?? fieldA11y?.label ?? t("Slider"),
+                  accessibilityHint: fieldA11y?.description,
+                  accessibilityValue: {
+                    min,
+                    max,
+                    now: thumbValueNow,
+                    text: String(thumbValueNow),
+                  },
+                  accessibilityState: { disabled: !!disabled },
+                  accessibilityActions: A11Y_ADJUSTABLE_ACTIONS,
+                  onAccessibilityAction: (event: { nativeEvent: { actionName: string } }) => {
+                    if (event.nativeEvent.actionName === "increment") {
+                      handleA11yAdjust(thumbIndex, 1);
+                    } else if (event.nativeEvent.actionName === "decrement") {
+                      handleA11yAdjust(thumbIndex, -1);
+                    }
+                  },
+                };
+            // Web: string transition session (css driver tweens `left`).
+            // Native: per-property transform transition + FLIP `x` override.
+            const thumbMotionProps = jumpMotionEnabled
+              ? (jumpMotion.getThumbMotionProps(thumbIndex) as Record<string, unknown>)
+              : { transition: transitionProp };
+            // The elevation wrapper is WEB-ONLY: on iOS the wrapper is a
+            // zero-height flow view (the thumb inside is absolutely positioned),
+            // and iOS accessibility culls the entire subtree under a zero-rect
+            // ancestor — the thumb was invisible to VoiceOver. The wrapper also
+            // draws nothing on native (a zero-rect casts no shadow; the thumb
+            // carries its own LC-04 shadow), so dropping it changes no pixels.
+            const thumbRingProps = {
+              outlineWidth: 0,
+              borderWidth: 0,
+              borderColor: "transparent",
+              backgroundColor: thumbFill,
+              hoverStyle: {
+                backgroundColor: thumbFill,
+                ...(isWeb ? { cursor: "grab" } : undefined),
+              },
+              pressStyle: {
+                backgroundColor: thumbFill,
+                opacity: 0.92,
+                ...(isWeb ? { cursor: "grabbing" } : undefined),
+              },
+              focusStyle: { outlineWidth: 0 },
+              focusVisibleStyle: { outlineWidth: 0 },
+              ...(isWeb
+                ? {
+                    onFocus: () => {
+                      if (wasKeyboardFocus()) setKbThumb(thumbIndex);
+                      else setKbThumb((prev) => (prev === thumbIndex ? null : prev));
+                    },
+                    onBlur: () => setKbThumb((prev) => (prev === thumbIndex ? null : prev)),
                   }
-                },
-              };
-          // Web: string transition session (css driver tweens `left`).
-          // Native: per-property transform transition + FLIP `x` override.
-          const thumbMotionProps = jumpMotionEnabled
-            ? (jumpMotion.getThumbMotionProps(thumbIndex) as Record<string, unknown>)
-            : { transition: transitionProp };
-          // The elevation wrapper is WEB-ONLY: on iOS the wrapper is a
-          // zero-height flow view (the thumb inside is absolutely positioned),
-          // and iOS accessibility culls the entire subtree under a zero-rect
-          // ancestor — the thumb was invisible to VoiceOver. The wrapper also
-          // draws nothing on native (a zero-rect casts no shadow; the thumb
-          // carries its own LC-04 shadow), so dropping it changes no pixels.
-          return elevationWrapperProps.elevation && isWeb ? (
-            <View key={thumbIndex} {...elevationWrapperProps} borderRadius={thumbRadius}>
+                : undefined),
+              ...(kbThumb === thumbIndex
+                ? { ...thumbFocusRing, "data-kb-focus": "true" }
+                : undefined),
+            };
+            return elevationWrapperProps.elevation && isWeb ? (
+              <View key={thumbIndex} {...elevationWrapperProps} borderRadius={thumbRadius}>
+                <SliderThumbFrame
+                  index={thumbIndex}
+                  circular={!isSquare}
+                  borderRadius={thumbRadius}
+                  {...thumbRingProps}
+                  {...thumbMotionProps}
+                  {...thumbA11y}
+                  {...(nativeThumbA11y as Record<string, unknown> | undefined)}
+                />
+              </View>
+            ) : (
               <SliderThumbFrame
+                key={thumbIndex}
                 index={thumbIndex}
                 circular={!isSquare}
                 borderRadius={thumbRadius}
-                focusVisibleStyle={thumbFocusRing}
+                {...thumbRingProps}
                 {...thumbMotionProps}
                 {...thumbA11y}
                 {...(nativeThumbA11y as Record<string, unknown> | undefined)}
               />
-            </View>
-          ) : (
-            <SliderThumbFrame
-              key={thumbIndex}
-              index={thumbIndex}
-              circular={!isSquare}
-              borderRadius={thumbRadius}
-              focusVisibleStyle={thumbFocusRing}
-              {...thumbMotionProps}
-              {...thumbA11y}
-              {...(nativeThumbA11y as Record<string, unknown> | undefined)}
-            />
-          );
-        })}
-      </TamaguiSlider>
+            );
+          })}
+        </TamaguiSlider>
+      </View>
+      <Paragraph
+        size="$2"
+        color={formCommonColors.text}
+        minWidth={sliderValue.length > 1 ? 56 : 32}
+        textAlign="right"
+        aria-hidden
+      >
+        {formatSliderOutput(displayValues, step)}
+      </Paragraph>
     </XStack>
   );
 }
@@ -576,7 +674,7 @@ export function Slider({
     return (
       <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
         <XStack height={size || knobProps.sizeToken} alignItems="center" width="100%">
-          <Skeleton variant="rounded" width="100%" height={6} />
+          <Skeleton variant="rounded" width="100%" height={TRACK_HEIGHT} />
         </XStack>
       </FieldLayout>
     );

package/src/fields/Slider/jumpMotion.ts

@@ -1,6 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { getSize } from "@tamagui/get-token";
-import { getTokens, getVariableValue } from "tamagui";
+import { isTouchSurface, sizeRecipeForToken } from "@multiplatform.one/theme";
 
 /**
  * LC-25 jump motion for NATIVE: the RN animation driver
@@ -120,31 +119,16 @@ export function hasMinStepsBetween(values: number[], minStepsBetweenValues: numb
 }
 
 /**
- * The RENDERED thumb diameter — the number tamagui's own positional math uses
- * after its first `onLayout` (`SliderThumb` measures itself and recomputes the
- * in-bounds offset from the MEASURED size).
+ * The RENDERED thumb diameter used by jump FLIP math (and the visual thumb
+ * size once the slider frame applies it).
  *
- * Two style sources compete for the thumb's width:
- *
- * 1. the `size` variant (`getThumbSize`): `getSize(token, { shift: -1 })` —
- *    one size-token DOWN (e.g. `$1.5` → `$1` = 20);
- * 2. the ThemeableStack `circular` variant: `tokens.size[props.size]` —
- *    the token UNSHIFTED (e.g. `$1.5` = 24).
- *
- * Tamagui's `SliderThumb` renders `size={…}` before `circular={…}`, so when
- * `circular` is set its width WINS and the thumb renders one token larger
- * than the `size` variant (and larger than tamagui's own pre-layout
- * estimate). The previous replica always used the shifted size, which put the
- * base-x formula 1–4pt off the true rendered position — the settle-release
- * pop and the range-slider non-target shift measured by the iOS sweep.
+ * Visual size is the size-recipe height for the token (LC-65) — not
+ * Tamagui's `getSize(token, { shift: -1 })` nor the unshifted size ramp
+ * (`$4` is 32, not 44). Radius is not on the recipe; circular vs square
+ * does not change diameter.
  */
-export function getSliderThumbRenderSize(sizeToken: string, circular: boolean): number {
-  const tokens = getTokens();
-  const tokenVariable = tokens.size[sizeToken as keyof typeof tokens.size] as any;
-  if (circular) {
-    return getVariableValue(tokenVariable) as number;
-  }
-  return getVariableValue(getSize(tokenVariable, { shift: -1 })) as number;
+export function getSliderThumbRenderSize(sizeToken: string, _circular?: boolean): number {
+  return sizeRecipeForToken(sizeToken, { touch: isTouchSurface() }).height;
 }
 
 /**