@tamagui/slider 3.0.0-beta.922.1 → 3.0.0

package/dist/jsx/SliderResponder.mjs

@@ -0,0 +1,28 @@
+import { View } from "@tamagui/core";
+import { useResponderEvents } from "@tamagui/react-native-use-responder-events";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+
+const SliderResponder = ({ onResponderGrant, onResponderMove, onResponderRelease, children }) => {
+	const ref = React.useRef(null);
+	useResponderEvents(ref, {
+		onMoveShouldSetResponderCapture: () => true,
+		onMoveShouldSetResponder: () => true,
+		onStartShouldSetResponder: () => true,
+		onResponderTerminationRequest: () => false,
+		onResponderGrant,
+		onResponderMove,
+		onResponderRelease
+	});
+	return /* @__PURE__ */ jsx(View, {
+		ref,
+		position: "absolute",
+		inset: 0,
+		justifyContent: "center",
+		alignItems: "center",
+		children
+	});
+};
+
+export { SliderResponder };
+//# sourceMappingURL=SliderResponder.mjs.map

package/dist/jsx/SliderResponder.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderResponder.js","names":[],"sources":["jsx/SliderResponder.js"],"sourcesContent":["import { View } from \"@tamagui/core\";\nimport { useResponderEvents } from \"@tamagui/react-native-use-responder-events\";\nimport * as React from \"react\";\nimport { jsx } from \"react/jsx-runtime\";\nconst SliderResponder = ({\n  onResponderGrant,\n  onResponderMove,\n  onResponderRelease,\n  children\n}) => {\n  const ref = React.useRef(null);\n  useResponderEvents(ref, {\n    onMoveShouldSetResponderCapture: () => true,\n    onMoveShouldSetResponder: () => true,\n    onStartShouldSetResponder: () => true,\n    onResponderTerminationRequest: () => false,\n    onResponderGrant,\n    onResponderMove,\n    onResponderRelease\n  });\n  return /* @__PURE__ */ jsx(\n    View,\n    {\n      ref,\n      position: \"absolute\",\n      inset: 0,\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      children\n    }\n  );\n};\nexport {\n  SliderResponder\n};\n//# sourceMappingURL=SliderResponder.js.map\n"],"mappings":";;;;;;AAIA,MAAM,mBAAmB,EACvB,kBACA,iBACA,oBACA,eACI;CACJ,MAAM,MAAM,MAAM,OAAO,IAAI;CAC7B,mBAAmB,KAAK;EACtB,uCAAuC;EACvC,gCAAgC;EAChC,iCAAiC;EACjC,qCAAqC;EACrC;EACA;EACA;CACF,CAAC;CACD,OAAuB,oBACrB,MACA;EACE;EACA,UAAU;EACV,OAAO;EACP,gBAAgB;EAChB,YAAY;EACZ;CACF,CACF;AACF"}

package/dist/jsx/SliderResponder.native.cjs

@@ -0,0 +1,54 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SliderResponder_native_exports = {};
+__export(SliderResponder_native_exports, { SliderResponder: () => SliderResponder });
+module.exports = __toCommonJS(SliderResponder_native_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_native = require("react-native");
+var SliderResponder = function(param) {
+	var { onResponderGrant, onResponderMove, onResponderRelease, children } = param;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, {
+		onMoveShouldSetResponderCapture: function() {
+			return true;
+		},
+		onMoveShouldSetResponder: function() {
+			return true;
+		},
+		onStartShouldSetResponder: function() {
+			return true;
+		},
+		onResponderTerminationRequest: function() {
+			return false;
+		},
+		onResponderGrant,
+		onResponderMove,
+		onResponderRelease,
+		style: {
+			inset: 0,
+			position: "absolute",
+			justifyContent: "center",
+			alignItems: "center"
+		},
+		children
+	});
+};

package/dist/jsx/SliderResponder.native.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SliderResponder_native_exports = {};
+__export(SliderResponder_native_exports, { SliderResponder: () => SliderResponder });
+module.exports = __toCommonJS(SliderResponder_native_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_native = require("react-native");
+var SliderResponder = function(param) {
+	var { onResponderGrant, onResponderMove, onResponderRelease, children } = param;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, {
+		onMoveShouldSetResponderCapture: function() {
+			return true;
+		},
+		onMoveShouldSetResponder: function() {
+			return true;
+		},
+		onStartShouldSetResponder: function() {
+			return true;
+		},
+		onResponderTerminationRequest: function() {
+			return false;
+		},
+		onResponderGrant,
+		onResponderMove,
+		onResponderRelease,
+		style: {
+			inset: 0,
+			position: "absolute",
+			justifyContent: "center",
+			alignItems: "center"
+		},
+		children
+	});
+};
+
+//# sourceMappingURL=SliderResponder.native.js.map

package/dist/jsx/SliderResponder.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderResponder.native.js","names":[],"sources":["jsx/SliderResponder.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar SliderResponder_native_exports = {};\n__export(SliderResponder_native_exports, {\n  SliderResponder: () => SliderResponder\n});\nmodule.exports = __toCommonJS(SliderResponder_native_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_react_native = require(\"react-native\");\nvar SliderResponder = function(param) {\n  var { onResponderGrant, onResponderMove, onResponderRelease, children } = param;\n  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, {\n    onMoveShouldSetResponderCapture: function() {\n      return true;\n    },\n    onMoveShouldSetResponder: function() {\n      return true;\n    },\n    onStartShouldSetResponder: function() {\n      return true;\n    },\n    onResponderTerminationRequest: function() {\n      return false;\n    },\n    onResponderGrant,\n    onResponderMove,\n    onResponderRelease,\n    style: {\n      inset: 0,\n      position: \"absolute\",\n      justifyContent: \"center\",\n      alignItems: \"center\"\n    },\n    children\n  });\n};\n//# sourceMappingURL=SliderResponder.native.js.map\n"],"mappings":";;;AACA,IAAI,YAAY,OAAO;AACvB,IAAI,mBAAmB,OAAO;AAC9B,IAAI,oBAAoB,OAAO;AAC/B,IAAI,eAAe,OAAO,UAAU;AACpC,IAAI,YAAY,QAAQ,QAAQ;CAC9B,KAAK,IAAI,QAAQ,KACf,UAAU,QAAQ,MAAM;EAAE,KAAK,IAAI;EAAO,YAAY;CAAK,CAAC;AAChE;AACA,IAAI,eAAe,IAAI,MAAM,QAAQ,SAAS;CAC5C,IAAI,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY;EAClE,KAAK,IAAI,OAAO,kBAAkB,IAAI,GACpC,IAAI,CAAC,aAAa,KAAK,IAAI,GAAG,KAAK,QAAQ,QACzC,UAAU,IAAI,KAAK;GAAE,WAAW,KAAK;GAAM,YAAY,EAAE,OAAO,iBAAiB,MAAM,GAAG,MAAM,KAAK;EAAW,CAAC;CACvH;CACA,OAAO;AACT;AACA,IAAI,gBAAgB,QAAQ,YAAY,UAAU,CAAC,GAAG,cAAc,EAAE,OAAO,KAAK,CAAC,GAAG,GAAG;AACzF,IAAI,iCAAiC,CAAC;AACtC,SAAS,gCAAgC,EACvC,uBAAuB,gBACzB,CAAC;AACD,OAAO,UAAU,aAAa,8BAA8B;AAC5D,IAAI,qBAAqB,QAAQ,mBAAmB;AACpD,IAAI,sBAAsB,QAAQ,cAAc;AAChD,IAAI,kBAAkB,SAAS,OAAO;CACpC,IAAI,EAAE,kBAAkB,iBAAiB,oBAAoB,aAAa;CAC1E,OAAuB,iBAAC,GAAG,mBAAmB,IAAG,CAAE,oBAAoB,MAAM;EAC3E,iCAAiC,WAAW;GAC1C,OAAO;EACT;EACA,0BAA0B,WAAW;GACnC,OAAO;EACT;EACA,2BAA2B,WAAW;GACpC,OAAO;EACT;EACA,+BAA+B,WAAW;GACxC,OAAO;EACT;EACA;EACA;EACA;EACA,OAAO;GACL,OAAO;GACP,UAAU;GACV,gBAAgB;GAChB,YAAY;EACd;EACA;CACF,CAAC;AACH"}

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@tamagui/slider",
-  "version": "3.0.0-beta.922.1",
+  "version": "3.0.0",
+  "license": "MIT",
   "source": "src/index.ts",
   "files": [
     "src",
@@ -34,21 +35,23 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/compose-refs": "3.0.0-beta.922.1",
-    "@tamagui/constants": "3.0.0-beta.922.1",
-    "@tamagui/core": "3.0.0-beta.922.1",
-    "@tamagui/create-context": "3.0.0-beta.922.1",
-    "@tamagui/get-token": "3.0.0-beta.922.1",
-    "@tamagui/helpers": "3.0.0-beta.922.1",
-    "@tamagui/stacks": "3.0.0-beta.922.1",
-    "@tamagui/use-controllable-state": "3.0.0-beta.922.1",
-    "@tamagui/use-debounce": "3.0.0-beta.922.1",
-    "@tamagui/use-direction": "3.0.0-beta.922.1"
+    "@tamagui/compose-refs": "3.0.0",
+    "@tamagui/constants": "3.0.0",
+    "@tamagui/core": "3.0.0",
+    "@tamagui/create-context": "3.0.0",
+    "@tamagui/get-token": "3.0.0",
+    "@tamagui/helpers": "3.0.0",
+    "@tamagui/react-native-types": "3.0.0",
+    "@tamagui/react-native-use-responder-events": "3.0.0",
+    "@tamagui/stacks": "3.0.0",
+    "@tamagui/use-controllable-state": "3.0.0",
+    "@tamagui/use-debounce": "3.0.0",
+    "@tamagui/use-direction": "3.0.0"
   },
   "devDependencies": {
-    "@tamagui/build": "3.0.0-beta.922.1",
+    "@tamagui/build": "3.0.0",
     "react": "19.2.3",
-    "react-native": "0.86.2"
+    "react-native": "0.87.1"
   },
   "peerDependencies": {
     "react": ">=19",
@@ -59,5 +62,6 @@
     "type": "git",
     "url": "git+https://github.com/tamagui/tamagui.git",
     "directory": "code/ui/slider"
-  }
+  },
+  "releaseSourceCommit": "15fbca480b143f876f6975601e23a17d3f90d2ee"
 }

package/src/Slider.tsx

@@ -2,18 +2,13 @@
 
 import { composeRefs, useComposedRefs } from '@tamagui/compose-refs'
 import { isIos, isWeb } from '@tamagui/constants'
-import type {
-  GestureReponderEvent,
-  GetProps,
-  SizeTokens,
-  TamaguiElement,
-} from '@tamagui/core'
+import type { GestureReponderEvent, GetProps, TamaguiElement } from '@tamagui/core'
 import {
   createStyledHOC,
   createRefComponent,
-  getTokens,
+  getConfig,
   getVariableValue,
-  resolveSizeToken,
+  resolveTextMetrics,
   styled,
   useConfiguration,
   useCreateShallowSetState,
@@ -23,7 +18,7 @@ import { YStack } from '@tamagui/stacks'
 import { useControllableState } from '@tamagui/use-controllable-state'
 import { useDirection } from '@tamagui/use-direction'
 import * as React from 'react'
-import type { View } from 'react-native'
+import type { ViewInstance as View } from '@tamagui/react-native-types'
 
 import {
   ARROW_KEYS,
@@ -88,6 +83,27 @@ function removeActiveSliderMeasureListener(listener: Function) {
   }
 }
 
+// on web a responder event's pageX/pageY come straight off the DOM event and are
+// document-relative, while `measure` reports the track through getBoundingClientRect
+// and is viewport-relative. subtracting the cached offset therefore mixes origins and
+// the thumb lags the cursor by exactly the page scroll (#4146). locationX/locationY
+// are `client - track.getBoundingClientRect()`, read fresh on every event, so they
+// need no offset at all - which is why onSlideStart was already correct. that also
+// closes the window where the cached offset is stale: nothing re-measures on scroll,
+// only on resize, an IntersectionObserver threshold crossing, and a 1s interval.
+// native measures the track and the touch against the screen, so it keeps the offset.
+const getTrackPosition = (
+  event: GestureReponderEvent,
+  offset: number,
+  orientation: 'horizontal' | 'vertical'
+) => {
+  const { locationX, locationY, pageX, pageY } = event.nativeEvent
+  if (isWeb) {
+    return orientation === 'horizontal' ? locationX : locationY
+  }
+  return (orientation === 'horizontal' ? pageX : pageY) - offset
+}
+
 /* -------------------------------------------------------------------------------------------------
  * SliderHorizontal
  * -----------------------------------------------------------------------------------------------*/
@@ -152,13 +168,17 @@ const SliderHorizontal = createRefComponent<View, SliderHorizontalProps>(
             }
           }}
           onSlideMove={(event) => {
-            const value = getValueFromPointer(event.nativeEvent.pageX - state.offset)
+            const value = getValueFromPointer(
+              getTrackPosition(event, state.offset, 'horizontal')
+            )
             if (value) {
               onSlideMove?.(value, event)
             }
           }}
           onSlideEnd={(event) => {
-            const value = getValueFromPointer(event.nativeEvent.pageX - state.offset)
+            const value = getValueFromPointer(
+              getTrackPosition(event, state.offset, 'horizontal')
+            )
             if (value) {
               onSlideEnd?.(event, value)
             }
@@ -292,13 +312,17 @@ const SliderVertical = createRefComponent<View, SliderVerticalProps>(
             }
           }}
           onSlideMove={(event) => {
-            const value = getValueFromPointer(event.nativeEvent.pageY - state.offset)
+            const value = getValueFromPointer(
+              getTrackPosition(event, state.offset, 'vertical')
+            )
             if (value) {
               onSlideMove?.(value, event)
             }
           }}
           onSlideEnd={(event) => {
-            const value = getValueFromPointer(event.nativeEvent.pageY - state.offset)
+            const value = getValueFromPointer(
+              getTrackPosition(event, state.offset, 'vertical')
+            )
             onSlideEnd?.(event, value)
           }}
           onStepKeyDown={(event) => {
@@ -339,7 +363,6 @@ const SliderTrack = createStyledHOC(
         data-disabled={context.disabled ? '' : undefined}
         data-orientation={context.orientation}
         orientation={context.orientation}
-        size={context.size ?? undefined}
         {...trackProps}
         ref={forwardedRef}
       />
@@ -383,8 +406,6 @@ const SliderActive = createStyledHOC(
         orientation={context.orientation}
         data-orientation={context.orientation}
         data-disabled={context.disabled ? '' : undefined}
-        size={context.size ?? undefined}
-        animateOnly={['left', 'top', 'right', 'bottom']}
         {...rangeProps}
         ref={composedRefs}
         {...{
@@ -408,31 +429,38 @@ const SliderActive = createStyledHOC(
  * SliderThumb
  * -----------------------------------------------------------------------------------------------*/
 
-// TODO make this customizable through tamagui
-// so we can accurately use it for estimatedSize below
-const getThumbSize = styled.dynamic<SizeTokens | number | true>((val) => {
-  const tokens = getTokens()
-  const sizeToken = resolveSizeToken(val ?? true, 'size')
-  const resolved = typeof sizeToken === 'number' ? sizeToken : tokens.size[sizeToken]
-  const size = typeof val === 'number' ? val : getVariableValue(resolved) * 0.86
-  return {
-    width: size,
-    height: size,
-    minWidth: size,
-    minHeight: size,
+// the thumb's px before its first layout: a number as given, a font size key
+// measured as that font's line height, otherwise 20. skins pass px through the
+// root's `size`; the thumb re-measures itself on layout either way.
+const thumbSize = (val: string | number | boolean | null | undefined) => {
+  if (typeof val === 'number') return val
+  if (typeof val === 'string') {
+    const conf = getConfig()
+    const font = conf.fontsParsed[conf.defaultFontToken]
+    const fontSize = font?.size[val]
+    if (fontSize != null) {
+      const metrics: Record<string, unknown> = {
+        fontSize: Number.parseFloat(String(getVariableValue(fontSize))),
+      }
+      const lineHeight = font?.lineHeight?.[val]
+      resolveTextMetrics(
+        metrics,
+        typeof lineHeight === 'number' ? `${lineHeight}px` : lineHeight
+      )
+      return (metrics.lineHeight ?? metrics.fontSize) as number
+    }
   }
-})
+  return 20
+}
 
-// Unstyled thumb frame: positioning + the size mechanism (hit-target
-// dimensions) + the circular shape modifier (opt-in, off by default). Border,
-// background, and hover/press/focus color styling live in the tamagui skin.
+// Unstyled thumb frame: positioning + the circular shape modifier (opt-in, off
+// by default). Hit-target dimensions, border, background, and hover/press/focus
+// color styling live in the tamagui skin.
 export const SliderThumbFrame = styled(YStack, {
   displayName: 'SliderThumb',
   position: 'absolute',
 
   variants: {
-    size: getThumbSize,
-
     circular: {
       true: {
         borderRadius: 100_000,
@@ -455,6 +483,8 @@ export const SliderThumbFrame = styled(YStack, {
 
 export interface SliderThumbExtraProps {
   index?: number
+  /** thumb px before its first layout: a number, or a font size key */
+  size?: string | number | boolean
 }
 
 export type SliderThumbProps = GetProps<typeof SliderThumbFrame> & SliderThumbExtraProps
@@ -473,14 +503,9 @@ const SliderThumb = createStyledHOC(
     const percent =
       value === undefined ? 0 : convertValueToPercentage(value, context.min, context.max)
     const label = getLabel(index, context.values.length)
-    const sizeIn = (sizeProp ?? context.size ?? true) as SizeTokens | number | true
-    const [size, setSize] = React.useState(() => {
-      // for SSR
-      const estimatedSize = getVariableValue(
-        getThumbSize(sizeIn, {} as any)?.width
-      ) as number
-      return estimatedSize
-    })
+    const sizeIn = (sizeProp ?? context.size ?? true) as string | number | boolean
+    // for SSR
+    const [size, setSize] = React.useState(() => thumbSize(sizeIn))
 
     const thumbInBoundsOffset = size
       ? getThumbInBoundsOffset(size, percent, orientation.direction)
@@ -528,12 +553,10 @@ const SliderThumb = createStyledHOC(
         data-orientation={context.orientation}
         data-disabled={context.disabled ? '' : undefined}
         tabIndex={context.disabled ? undefined : 0}
-        animateOnly={['transform', 'left', 'top', 'right', 'bottom']}
         {...positionalStyles}
         {...{
           [orientation.startEdge]: `${percent}%`,
         }}
-        size={sizeIn}
         circular={circular}
         {...thumbProps}
         onLayout={(e) => {

package/src/SliderImpl.tsx

@@ -5,46 +5,32 @@ import { createRefComponent } from '@tamagui/core'
 
 import { isWeb } from '@tamagui/constants'
 import type { TamaguiElement } from '@tamagui/core'
-import { getVariableValue, styled } from '@tamagui/core'
-import { getSize } from '@tamagui/get-token'
+import { styled } from '@tamagui/core'
 import { YStack } from '@tamagui/stacks'
 import * as React from 'react'
-import { View } from 'react-native'
 
 import { ARROW_KEYS, PAGE_KEYS, SLIDER_NAME, useSliderContext } from './constants'
+import { SliderResponder } from './SliderResponder'
 import type { ScopedProps, SliderImplProps } from './types'
 
+// Unstyled track container: positioning only. Track thickness lives in the
+// tamagui skin (code/ui/tamagui/src/components/Slider.tsx).
 const SliderFrameBase = styled(YStack, {
   position: 'relative',
+  justifyContent: 'center',
+  alignItems: 'center',
 
   variants: {
     orientation: {
       horizontal: {},
       vertical: {},
     },
-
-    size: styled.dynamic<SliderImplProps['size']>(),
   } as const,
 })
 
-export const SliderFrame = SliderFrameBase.resolve((props) => {
-  if (!props.size) return
-  const size = Math.round(getVariableValue(getSize(props.size as any)) / 6)
-  if (props.orientation === 'horizontal') {
-    return {
-      height: size,
-      borderRadius: size,
-      justifyContent: 'center',
-    }
-  }
-  return {
-    width: size,
-    borderRadius: size,
-    alignItems: 'center',
-  }
-})
+export const SliderFrame = SliderFrameBase
 
-export const SliderImpl = createRefComponent<View, SliderImplProps>(
+export const SliderImpl = createRefComponent<TamaguiElement, SliderImplProps>(
   (props: ScopedProps<SliderImplProps>, forwardedRef) => {
     const {
       __scopeSlider,
@@ -104,10 +90,7 @@ export const SliderImpl = createRefComponent<View, SliderImplProps>(
     )
 
     return (
-      // wrap with plain RN View for responder events - tamagui views no longer handle responder events on web
-
       <SliderFrame
-        size="4"
         ref={forwardedRef as any}
         {...sliderProps}
         data-orientation={sliderProps.orientation}
@@ -129,18 +112,13 @@ export const SliderImpl = createRefComponent<View, SliderImplProps>(
           },
         })}
       >
-        <View
-          onMoveShouldSetResponderCapture={() => true}
-          onMoveShouldSetResponder={() => true}
-          onStartShouldSetResponder={() => true}
-          onResponderTerminationRequest={() => false}
+        <SliderResponder
           onResponderGrant={handleResponderGrant}
           onResponderMove={handleResponderMove}
           onResponderRelease={handleResponderRelease}
-          style={{ inset: 0, position: 'absolute' }}
         >
           {children}
-        </View>
+        </SliderResponder>
       </SliderFrame>
     )
   }

package/src/SliderResponder.native.tsx

@@ -0,0 +1,30 @@
+import { View } from 'react-native'
+
+import type { SliderResponderProps } from './types'
+
+export const SliderResponder = ({
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  children,
+}: SliderResponderProps) => {
+  return (
+    <View
+      onMoveShouldSetResponderCapture={() => true}
+      onMoveShouldSetResponder={() => true}
+      onStartShouldSetResponder={() => true}
+      onResponderTerminationRequest={() => false}
+      onResponderGrant={onResponderGrant}
+      onResponderMove={onResponderMove}
+      onResponderRelease={onResponderRelease}
+      style={{
+        inset: 0,
+        position: 'absolute',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      {children}
+    </View>
+  )
+}

package/src/SliderResponder.tsx

@@ -0,0 +1,43 @@
+import type { TamaguiElement } from '@tamagui/core'
+import { View } from '@tamagui/core'
+import { useResponderEvents } from '@tamagui/react-native-use-responder-events'
+import * as React from 'react'
+
+import type { SliderResponderProps } from './types'
+
+/**
+ * The slider is dragged through the responder system, and tamagui views stopped
+ * carrying responder props on web. This is the same responder system
+ * react-native-web runs, used directly, so dragging behaves as it did when this
+ * was a react-native `View`.
+ */
+export const SliderResponder = ({
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  children,
+}: SliderResponderProps) => {
+  const ref = React.useRef<TamaguiElement>(null)
+
+  useResponderEvents(ref, {
+    onMoveShouldSetResponderCapture: () => true,
+    onMoveShouldSetResponder: () => true,
+    onStartShouldSetResponder: () => true,
+    onResponderTerminationRequest: () => false,
+    onResponderGrant,
+    onResponderMove,
+    onResponderRelease,
+  })
+
+  return (
+    <View
+      ref={ref}
+      position="absolute"
+      inset={0}
+      justifyContent="center"
+      alignItems="center"
+    >
+      {children}
+    </View>
+  )
+}

package/src/constants.tsx

@@ -1,4 +1,4 @@
-import { createStyledContext, type SizeTokens } from '@tamagui/core'
+import { createStyledContext } from '@tamagui/core'
 
 import type { Direction, SliderContextValue } from './types'
 
@@ -31,7 +31,7 @@ export const {
   startEdge: 'bottom' | 'left' | 'right'
   endEdge: 'top' | 'right' | 'left'
   sizeProp: 'width' | 'height'
-  size: number | SizeTokens
+  size: number
   direction: number
 }>({
   startEdge: 'left',

package/src/types.ts

@@ -1,4 +1,4 @@
-import type { GestureReponderEvent, SizeTokens, TamaguiElement } from '@tamagui/core'
+import type { GestureReponderEvent, TamaguiElement } from '@tamagui/core'
 import type { Scope } from '@tamagui/create-context'
 import type { YStackProps } from '@tamagui/stacks'
 
@@ -25,9 +25,7 @@ type SliderImplPrivateProps = {
   onStepKeyDown(event: React.KeyboardEvent): void
 }
 
-export type SliderTrackProps = YStackProps & {
-  size?: SizeTokens | true
-}
+export type SliderTrackProps = YStackProps
 
 export interface SliderImplProps extends SliderTrackProps, SliderImplPrivateProps {
   dir?: Direction
@@ -66,7 +64,7 @@ export interface SliderProps
   extends
     Omit<SliderHorizontalProps, keyof SliderOrientationPrivateProps | 'defaultValue'>,
     SliderEventProps {
-  size?: SizeTokens | true
+  size?: string | number | boolean
   name?: string
   disabled?: boolean
   orientation?: React.AriaAttributes['aria-orientation']
@@ -81,7 +79,7 @@ export interface SliderProps
 }
 
 export type SliderContextValue = {
-  size?: SizeTokens | number | true | null
+  size?: string | number | boolean | null
   disabled?: boolean
   min: number
   max: number
@@ -90,3 +88,10 @@ export type SliderContextValue = {
   thumbs: Map<TamaguiElement, number>
   orientation: SliderProps['orientation']
 }
+
+export type SliderResponderProps = {
+  onResponderGrant: (event: any) => void
+  onResponderMove: (event: any) => void
+  onResponderRelease: (event: any) => void
+  children?: React.ReactNode
+}