@tamagui/slider 1.0.1-beta.95 → 1.0.1-beta.98

package/dist/jsx/helpers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/helpers.tsx"],
-  "sourcesContent": ["import { SizeTokens, getTokens, getVariableValue } from '@tamagui/core'\n\nexport function getNextSortedValues(prevValues: number[] = [], nextValue: number, atIndex: number) {\n  const nextValues = [...prevValues]\n  nextValues[atIndex] = nextValue\n  return nextValues.sort((a, b) => a - b)\n}\n\nexport function convertValueToPercentage(value: number, min: number, max: number) {\n  const maxSteps = max - min\n  const percentPerStep = 100 / maxSteps\n  return percentPerStep * (value - min)\n}\n\n/**\n * Returns a label for each thumb when there are two or more thumbs\n */\nexport function getLabel(index: number, totalValues: number) {\n  if (totalValues > 2) {\n    return `Value ${index + 1} of ${totalValues}`\n  } else if (totalValues === 2) {\n    return ['Minimum', 'Maximum'][index]\n  } else {\n    return undefined\n  }\n}\n\n/**\n * Given a `values` array and a `nextValue`, determine which value in\n * the array is closest to `nextValue` and return its index.\n *\n * @example\n * // returns 1\n * getClosestValueIndex([10, 30], 25);\n */\nexport function getClosestValueIndex(values: number[], nextValue: number) {\n  if (values.length === 1) return 0\n  const distances = values.map((value) => Math.abs(value - nextValue))\n  const closestDistance = Math.min(...distances)\n  return distances.indexOf(closestDistance)\n}\n\n/**\n * Offsets the thumb centre point while sliding to ensure it remains\n * within the bounds of the slider when reaching the edges\n */\nexport function getThumbInBoundsOffset(width: number, left: number, direction: number) {\n  const halfWidth = width / 2\n  const halfPercent = 50\n  const offset = linearScale([0, halfPercent], [0, halfWidth])\n  return (halfWidth - offset(left) * direction) * direction\n}\n\n/**\n * Gets an array of steps between each value.\n *\n * @example\n * // returns [1, 9]\n * getStepsBetweenValues([10, 11, 20]);\n */\nfunction getStepsBetweenValues(values: number[]) {\n  return values.slice(0, -1).map((value, index) => values[index + 1] - value)\n}\n\n/**\n * Verifies the minimum steps between all values is greater than or equal\n * to the expected minimum steps.\n *\n * @example\n * // returns false\n * hasMinStepsBetweenValues([1,2,3], 2);\n *\n * @example\n * // returns true\n * hasMinStepsBetweenValues([1,2,3], 1);\n */\nexport function hasMinStepsBetweenValues(values: number[], minStepsBetweenValues: number) {\n  if (minStepsBetweenValues > 0) {\n    const stepsBetweenValues = getStepsBetweenValues(values)\n    const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues)\n    return actualMinStepsBetweenValues >= minStepsBetweenValues\n  }\n  return true\n}\n\n// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js\nexport function linearScale(input: readonly [number, number], output: readonly [number, number]) {\n  return (value: number) => {\n    if (input[0] === input[1] || output[0] === output[1]) return output[0]\n    const ratio = (output[1] - output[0]) / (input[1] - input[0])\n    return output[0] + ratio * (value - input[0])\n  }\n}\n\nexport function getDecimalCount(value: number) {\n  return (String(value).split('.')[1] || '').length\n}\n\nexport function roundValue(value: number, decimalCount: number) {\n  const rounder = Math.pow(10, decimalCount)\n  return Math.round(value * rounder) / rounder\n}\n"],
-  "mappings": "AAEO,6BAA6B,aAAuB,CAAC,GAAG,WAAmB,SAAiB;AACjG,QAAM,aAAa,CAAC,GAAG,UAAU;AACjC,aAAW,WAAW;AACtB,SAAO,WAAW,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AACxC;AAEO,kCAAkC,OAAe,KAAa,KAAa;AAChF,QAAM,WAAW,MAAM;AACvB,QAAM,iBAAiB,MAAM;AAC7B,SAAO,iBAAkB,SAAQ;AACnC;AAKO,kBAAkB,OAAe,aAAqB;AAC3D,MAAI,cAAc,GAAG;AACnB,WAAO,SAAS,QAAQ,QAAQ;AAAA,EAClC,WAAW,gBAAgB,GAAG;AAC5B,WAAO,CAAC,WAAW,SAAS,EAAE;AAAA,EAChC,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAUO,8BAA8B,QAAkB,WAAmB;AACxE,MAAI,OAAO,WAAW;AAAG,WAAO;AAChC,QAAM,YAAY,OAAO,IAAI,CAAC,UAAU,KAAK,IAAI,QAAQ,SAAS,CAAC;AACnE,QAAM,kBAAkB,KAAK,IAAI,GAAG,SAAS;AAC7C,SAAO,UAAU,QAAQ,eAAe;AAC1C;AAMO,gCAAgC,OAAe,MAAc,WAAmB;AACrF,QAAM,YAAY,QAAQ;AAC1B,QAAM,cAAc;AACpB,QAAM,SAAS,YAAY,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,SAAS,CAAC;AAC3D,SAAQ,aAAY,OAAO,IAAI,IAAI,aAAa;AAClD;AASA,+BAA+B,QAAkB;AAC/C,SAAO,OAAO,MAAM,GAAG,EAAE,EAAE,IAAI,CAAC,OAAO,UAAU,OAAO,QAAQ,KAAK,KAAK;AAC5E;AAcO,kCAAkC,QAAkB,uBAA+B;AACxF,MAAI,wBAAwB,GAAG;AAC7B,UAAM,qBAAqB,sBAAsB,MAAM;AACvD,UAAM,8BAA8B,KAAK,IAAI,GAAG,kBAAkB;AAClE,WAAO,+BAA+B;AAAA,EACxC;AACA,SAAO;AACT;AAGO,qBAAqB,OAAkC,QAAmC;AAC/F,SAAO,CAAC,UAAkB;AACxB,QAAI,MAAM,OAAO,MAAM,MAAM,OAAO,OAAO,OAAO;AAAI,aAAO,OAAO;AACpE,UAAM,QAAS,QAAO,KAAK,OAAO,MAAO,OAAM,KAAK,MAAM;AAC1D,WAAO,OAAO,KAAK,QAAS,SAAQ,MAAM;AAAA,EAC5C;AACF;AAEO,yBAAyB,OAAe;AAC7C,SAAQ,QAAO,KAAK,EAAE,MAAM,GAAG,EAAE,MAAM,IAAI;AAC7C;AAEO,oBAAoB,OAAe,cAAsB;AAC9D,QAAM,UAAU,KAAK,IAAI,IAAI,YAAY;AACzC,SAAO,KAAK,MAAM,QAAQ,OAAO,IAAI;AACvC;",
+  "sourcesContent": ["export function getNextSortedValues(prevValues: number[] = [], nextValue: number, atIndex: number) {\n  const nextValues = [...prevValues]\n  nextValues[atIndex] = nextValue\n  return nextValues.sort((a, b) => a - b)\n}\n\nexport function convertValueToPercentage(value: number, min: number, max: number) {\n  const maxSteps = max - min\n  const percentPerStep = 100 / maxSteps\n  return percentPerStep * (value - min)\n}\n\n/**\n * Returns a label for each thumb when there are two or more thumbs\n */\nexport function getLabel(index: number, totalValues: number) {\n  if (totalValues > 2) {\n    return `Value ${index + 1} of ${totalValues}`\n  } else if (totalValues === 2) {\n    return ['Minimum', 'Maximum'][index]\n  } else {\n    return undefined\n  }\n}\n\n/**\n * Given a `values` array and a `nextValue`, determine which value in\n * the array is closest to `nextValue` and return its index.\n *\n * @example\n * // returns 1\n * getClosestValueIndex([10, 30], 25);\n */\nexport function getClosestValueIndex(values: number[], nextValue: number) {\n  if (values.length === 1) return 0\n  const distances = values.map((value) => Math.abs(value - nextValue))\n  const closestDistance = Math.min(...distances)\n  return distances.indexOf(closestDistance)\n}\n\n/**\n * Offsets the thumb centre point while sliding to ensure it remains\n * within the bounds of the slider when reaching the edges\n */\nexport function getThumbInBoundsOffset(width: number, left: number, direction: number) {\n  const halfWidth = width / 2\n  const halfPercent = 50\n  const offset = linearScale([0, halfPercent], [0, halfWidth])\n  return (halfWidth - offset(left) * direction) * direction\n}\n\n/**\n * Gets an array of steps between each value.\n *\n * @example\n * // returns [1, 9]\n * getStepsBetweenValues([10, 11, 20]);\n */\nfunction getStepsBetweenValues(values: number[]) {\n  return values.slice(0, -1).map((value, index) => values[index + 1] - value)\n}\n\n/**\n * Verifies the minimum steps between all values is greater than or equal\n * to the expected minimum steps.\n *\n * @example\n * // returns false\n * hasMinStepsBetweenValues([1,2,3], 2);\n *\n * @example\n * // returns true\n * hasMinStepsBetweenValues([1,2,3], 1);\n */\nexport function hasMinStepsBetweenValues(values: number[], minStepsBetweenValues: number) {\n  if (minStepsBetweenValues > 0) {\n    const stepsBetweenValues = getStepsBetweenValues(values)\n    const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues)\n    return actualMinStepsBetweenValues >= minStepsBetweenValues\n  }\n  return true\n}\n\n// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js\nexport function linearScale(input: readonly [number, number], output: readonly [number, number]) {\n  return (value: number) => {\n    if (input[0] === input[1] || output[0] === output[1]) return output[0]\n    const ratio = (output[1] - output[0]) / (input[1] - input[0])\n    return output[0] + ratio * (value - input[0])\n  }\n}\n\nexport function getDecimalCount(value: number) {\n  return (String(value).split('.')[1] || '').length\n}\n\nexport function roundValue(value: number, decimalCount: number) {\n  const rounder = Math.pow(10, decimalCount)\n  return Math.round(value * rounder) / rounder\n}\n"],
+  "mappings": "AAAO,6BAA6B,aAAuB,CAAC,GAAG,WAAmB,SAAiB;AACjG,QAAM,aAAa,CAAC,GAAG,UAAU;AACjC,aAAW,WAAW;AACtB,SAAO,WAAW,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AACxC;AAEO,kCAAkC,OAAe,KAAa,KAAa;AAChF,QAAM,WAAW,MAAM;AACvB,QAAM,iBAAiB,MAAM;AAC7B,SAAO,iBAAkB,SAAQ;AACnC;AAKO,kBAAkB,OAAe,aAAqB;AAC3D,MAAI,cAAc,GAAG;AACnB,WAAO,SAAS,QAAQ,QAAQ;AAAA,EAClC,WAAW,gBAAgB,GAAG;AAC5B,WAAO,CAAC,WAAW,SAAS,EAAE;AAAA,EAChC,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAUO,8BAA8B,QAAkB,WAAmB;AACxE,MAAI,OAAO,WAAW;AAAG,WAAO;AAChC,QAAM,YAAY,OAAO,IAAI,CAAC,UAAU,KAAK,IAAI,QAAQ,SAAS,CAAC;AACnE,QAAM,kBAAkB,KAAK,IAAI,GAAG,SAAS;AAC7C,SAAO,UAAU,QAAQ,eAAe;AAC1C;AAMO,gCAAgC,OAAe,MAAc,WAAmB;AACrF,QAAM,YAAY,QAAQ;AAC1B,QAAM,cAAc;AACpB,QAAM,SAAS,YAAY,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,SAAS,CAAC;AAC3D,SAAQ,aAAY,OAAO,IAAI,IAAI,aAAa;AAClD;AASA,+BAA+B,QAAkB;AAC/C,SAAO,OAAO,MAAM,GAAG,EAAE,EAAE,IAAI,CAAC,OAAO,UAAU,OAAO,QAAQ,KAAK,KAAK;AAC5E;AAcO,kCAAkC,QAAkB,uBAA+B;AACxF,MAAI,wBAAwB,GAAG;AAC7B,UAAM,qBAAqB,sBAAsB,MAAM;AACvD,UAAM,8BAA8B,KAAK,IAAI,GAAG,kBAAkB;AAClE,WAAO,+BAA+B;AAAA,EACxC;AACA,SAAO;AACT;AAGO,qBAAqB,OAAkC,QAAmC;AAC/F,SAAO,CAAC,UAAkB;AACxB,QAAI,MAAM,OAAO,MAAM,MAAM,OAAO,OAAO,OAAO;AAAI,aAAO,OAAO;AACpE,UAAM,QAAS,QAAO,KAAK,OAAO,MAAO,OAAM,KAAK,MAAM;AAC1D,WAAO,OAAO,KAAK,QAAS,SAAQ,MAAM;AAAA,EAC5C;AACF;AAEO,yBAAyB,OAAe;AAC7C,SAAQ,QAAO,KAAK,EAAE,MAAM,GAAG,EAAE,MAAM,IAAI;AAC7C;AAEO,oBAAoB,OAAe,cAAsB;AAC9D,QAAM,UAAU,KAAK,IAAI,IAAI,YAAY;AACzC,SAAO,KAAK,MAAM,QAAQ,OAAO,IAAI;AACvC;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/slider",
-  "version": "1.0.1-beta.95",
+  "version": "1.0.1-beta.98",
   "sideEffects": [
     "*.css"
   ],
@@ -21,12 +21,12 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/compose-refs": "^1.0.1-beta.95",
-    "@tamagui/core": "^1.0.1-beta.95",
-    "@tamagui/create-context": "^1.0.1-beta.95",
-    "@tamagui/stacks": "^1.0.1-beta.95",
-    "@tamagui/use-controllable-state": "^1.0.1-beta.95",
-    "@tamagui/use-direction": "^1.0.1-beta.95"
+    "@tamagui/compose-refs": "^1.0.1-beta.98",
+    "@tamagui/core": "^1.0.1-beta.98",
+    "@tamagui/create-context": "^1.0.1-beta.98",
+    "@tamagui/stacks": "^1.0.1-beta.98",
+    "@tamagui/use-controllable-state": "^1.0.1-beta.98",
+    "@tamagui/use-direction": "^1.0.1-beta.98"
   },
   "peerDependencies": {
     "react": "*",
@@ -34,7 +34,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.95",
+    "@tamagui/build": "^1.0.1-beta.98",
     "@types/react-native": "^0.67.3",
     "react": "*",
     "react-dom": "*",

package/src/Slider.tsx

@@ -1,7 +1,8 @@
 // forked from radix-ui
 
-import { useComposedRefs } from '@tamagui/compose-refs'
+import { composeRefs, useComposedRefs } from '@tamagui/compose-refs'
 import {
+  GetProps,
   SizeTokens,
   getSize,
   getVariableValue,
@@ -10,11 +11,11 @@ import {
   withStaticProperties,
 } from '@tamagui/core'
 import { clamp, composeEventHandlers } from '@tamagui/helpers'
-import { SizableStackProps, ThemeableStack, YStackProps } from '@tamagui/stacks'
+import { SizableStackProps, ThemeableStack } from '@tamagui/stacks'
 import { useControllableState } from '@tamagui/use-controllable-state'
 import { useDirection } from '@tamagui/use-direction'
 import * as React from 'react'
-import { LayoutRectangle, View } from 'react-native'
+import { View } from 'react-native'
 
 import {
   ARROW_KEYS,
@@ -42,7 +43,6 @@ import {
   ScopedProps,
   SliderContextValue,
   SliderHorizontalProps,
-  SliderImplElement,
   SliderProps,
   SliderTrackProps,
   SliderVerticalProps,
@@ -52,20 +52,16 @@ import {
  * SliderHorizontal
  * -----------------------------------------------------------------------------------------------*/
 
-type SliderHorizontalElement = SliderImplElement
-
-const SliderHorizontal = React.forwardRef<SliderHorizontalElement, SliderHorizontalProps>(
+const SliderHorizontal = React.forwardRef<View, SliderHorizontalProps>(
   (props: ScopedProps<SliderHorizontalProps>, forwardedRef) => {
     const { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props
     const direction = useDirection(dir)
     const isDirectionLTR = direction === 'ltr'
-    const layoutRef = React.useRef<LayoutRectangle | null>(null)
-    const [size, setSize] = React.useState(0)
+    const sliderRef = React.useRef<View>(null)
+    const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))
 
     function getValueFromPointer(pointerPosition: number) {
-      const layout = layoutRef.current
-      if (!layout) return
-      const input: [number, number] = [0, layout.width]
+      const input: [number, number] = [0, state.size]
       const output: [number, number] = isDirectionLTR ? [min, max] : [max, min]
       const value = linearScale(input, output)
       return value(pointerPosition)
@@ -78,17 +74,20 @@ const SliderHorizontal = React.forwardRef<SliderHorizontalElement, SliderHorizon
         endEdge={isDirectionLTR ? 'right' : 'left'}
         direction={isDirectionLTR ? 1 : -1}
         sizeProp="width"
-        size={size}
+        size={state.size}
       >
         <SliderImpl
-          ref={forwardedRef}
+          ref={composeRefs(forwardedRef, sliderRef)}
           dir={direction}
           {...sliderProps}
           orientation="horizontal"
-          onLayout={(e) => {
-            const layout = e.nativeEvent.layout
-            layoutRef.current = layout
-            setSize(layout.height)
+          onLayout={() => {
+            sliderRef.current?.measure((_x, _y, width, _height, pageX, _pageY) => {
+              setState({
+                size: width,
+                offset: pageX,
+              })
+            })
           }}
           onSlideStart={(event, target) => {
             const value = getValueFromPointer(event.nativeEvent.locationX)
@@ -97,7 +96,7 @@ const SliderHorizontal = React.forwardRef<SliderHorizontalElement, SliderHorizon
             }
           }}
           onSlideMove={(event) => {
-            const value = getValueFromPointer(event.nativeEvent.locationX)
+            const value = getValueFromPointer(event.nativeEvent.pageX - state.offset)
             if (value) {
               onSlideMove?.(value)
             }
@@ -117,18 +116,14 @@ const SliderHorizontal = React.forwardRef<SliderHorizontalElement, SliderHorizon
  * SliderVertical
  * -----------------------------------------------------------------------------------------------*/
 
-type SliderVerticalElement = SliderImplElement
-
-const SliderVertical = React.forwardRef<SliderVerticalElement, SliderVerticalProps>(
+const SliderVertical = React.forwardRef<View, SliderVerticalProps>(
   (props: ScopedProps<SliderVerticalProps>, forwardedRef) => {
     const { min, max, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props
-    const layoutRef = React.useRef<LayoutRectangle | null>(null)
-    const [size, setSize] = React.useState(0)
+    const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))
+    const sliderRef = React.useRef<View>(null)
 
     function getValueFromPointer(pointerPosition: number) {
-      const layout = layoutRef.current
-      if (!layout) return
-      const input: [number, number] = [0, layout.height]
+      const input: [number, number] = [0, state.size]
       const output: [number, number] = [max, min]
       const value = linearScale(input, output)
       return value(pointerPosition)
@@ -140,17 +135,20 @@ const SliderVertical = React.forwardRef<SliderVerticalElement, SliderVerticalPro
         startEdge="bottom"
         endEdge="top"
         sizeProp="height"
-        size={size}
+        size={state.size}
         direction={1}
       >
         <SliderImpl
-          ref={forwardedRef}
+          ref={composeRefs(forwardedRef, sliderRef)}
           {...sliderProps}
           orientation="vertical"
-          onLayout={(e) => {
-            const layout = e.nativeEvent.layout
-            layoutRef.current = layout
-            setSize(layout.height)
+          onLayout={() => {
+            sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {
+              setState({
+                size: height,
+                offset: pageY,
+              })
+            })
           }}
           onSlideStart={(event, target) => {
             const value = getValueFromPointer(event.nativeEvent.locationY)
@@ -159,7 +157,7 @@ const SliderVertical = React.forwardRef<SliderVerticalElement, SliderVerticalPro
             }
           }}
           onSlideMove={(event) => {
-            const value = getValueFromPointer(event.nativeEvent.locationY)
+            const value = getValueFromPointer(event.nativeEvent.pageY - state.offset)
             if (value) {
               onSlideMove?.(value)
             }
@@ -218,21 +216,20 @@ SliderTrack.displayName = TRACK_NAME
 
 const RANGE_NAME = 'SliderTrackActive'
 
-type SliderTrackActiveElement = HTMLElement | View
-interface SliderTrackActiveProps extends YStackProps {}
-
 export const SliderTrackActiveFrame = styled(SliderFrame, {
   name: 'SliderTrackActive',
   backgroundColor: '$background',
   position: 'absolute',
 })
 
-const SliderTrackActive = React.forwardRef<SliderTrackActiveElement, SliderTrackActiveProps>(
+type SliderTrackActiveProps = GetProps<typeof SliderTrackActiveFrame>
+
+const SliderTrackActive = React.forwardRef<View, SliderTrackActiveProps>(
   (props: ScopedProps<SliderTrackActiveProps>, forwardedRef) => {
     const { __scopeSlider, ...rangeProps } = props
     const context = useSliderContext(RANGE_NAME, __scopeSlider)
     const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider)
-    const ref = React.useRef<HTMLSpanElement>(null)
+    const ref = React.useRef<View>(null)
     const composedRefs = useComposedRefs(forwardedRef, ref)
     const valuesCount = context.values.length
     const percentages = context.values.map((value) =>
@@ -305,12 +302,11 @@ export const SliderThumbFrame = styled(ThemeableStack, {
   },
 })
 
-type SliderThumbElement = HTMLElement | View
 interface SliderThumbProps extends SizableStackProps {
   index: number
 }
 
-const SliderThumb = React.forwardRef<SliderThumbElement, SliderThumbProps>(
+const SliderThumb = React.forwardRef<View, SliderThumbProps>(
   (props: ScopedProps<SliderThumbProps>, forwardedRef) => {
     const { __scopeSlider, index, size: sizeProp, ...thumbProps } = props
     const context = useSliderContext(THUMB_NAME, __scopeSlider)
@@ -355,8 +351,6 @@ const SliderThumb = React.forwardRef<SliderThumbElement, SliderThumbProps>(
         aria-orientation={context.orientation}
         data-orientation={context.orientation}
         data-disabled={context.disabled ? '' : undefined}
-        // TODO
-        // @ts-ignore
         tabIndex={context.disabled ? undefined : 0}
         {...thumbProps}
         {...(context.orientation === 'horizontal'
@@ -395,11 +389,6 @@ const SliderThumb = React.forwardRef<SliderThumbElement, SliderThumbProps>(
         onFocus={composeEventHandlers(props.onFocus, () => {
           context.valueIndexToChangeRef.current = index
         })}
-        // temp fix to make slider work nicely on native
-        // we just let the events propagate to the track
-        {...(!isWeb && {
-          pointerEvents: 'none',
-        })}
       />
     )
   }
@@ -411,10 +400,8 @@ SliderThumb.displayName = THUMB_NAME
  * Slider
  * -----------------------------------------------------------------------------------------------*/
 
-type SliderElement = SliderHorizontalElement | SliderVerticalElement
-
 const Slider = withStaticProperties(
-  React.forwardRef<SliderElement, SliderProps>((props: ScopedProps<SliderProps>, forwardedRef) => {
+  React.forwardRef<View, SliderProps>((props: ScopedProps<SliderProps>, forwardedRef) => {
     const {
       name,
       min = 0,
@@ -429,14 +416,14 @@ const Slider = withStaticProperties(
       size: sizeProp,
       ...sliderProps
     } = props
-    const sliderRef = React.useRef<SliderImplElement>(null)
+    const sliderRef = React.useRef<View>(null)
     const composedRefs = useComposedRefs(sliderRef, forwardedRef)
     const thumbRefs = React.useRef<SliderContextValue['thumbs']>(new Set())
     const valueIndexToChangeRef = React.useRef<number>(0)
     const isHorizontal = orientation === 'horizontal'
     // We set this to true by default so that events bubble to forms without JS (SSR)
-    // TODO
-    // const isFormControl = slider ? Boolean(slider.closest('form')) : true
+    // const isFormControl =
+    //   sliderRef.current instanceof HTMLElement ? Boolean(sliderRef.current.closest('form')) : true
 
     const [values = [], setValues] = useControllableState({
       prop: value,
@@ -452,6 +439,7 @@ const Slider = withStaticProperties(
 
     if (isWeb) {
       React.useEffect(() => {
+        // @ts-ignore
         const node = sliderRef.current as HTMLElement
         if (!node) return
         const preventDefault = (e) => {
@@ -553,7 +541,7 @@ Slider.displayName = SLIDER_NAME
 
 /* -----------------------------------------------------------------------------------------------*/
 
-// TODO
+// // TODO
 // const BubbleInput = (props: any) => {
 //   const { value, ...inputProps } = props
 //   const ref = React.useRef<HTMLInputElement>(null)

package/src/SliderImpl.tsx

@@ -5,9 +5,10 @@
 import { composeEventHandlers, getSize, getVariableValue, isWeb, 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 { ScopedProps, SliderImplElement, SliderImplProps } from './types'
+import { ScopedProps, SliderImplProps } from './types'
 
 export const DirectionalYStack = styled(YStack, {
   variants: {
@@ -41,7 +42,7 @@ export const SliderFrame = styled(DirectionalYStack, {
   },
 })
 
-export const SliderImpl = React.forwardRef<SliderImplElement, SliderImplProps>(
+export const SliderImpl = React.forwardRef<View, SliderImplProps>(
   (props: ScopedProps<SliderImplProps>, forwardedRef) => {
     const {
       __scopeSlider,
@@ -82,14 +83,14 @@ export const SliderImpl = React.forwardRef<SliderImplElement, SliderImplProps>(
         onScrollShouldSetResponderCapture={() => true}
         onMoveShouldSetResponder={() => true}
         onStartShouldSetResponder={() => true}
-        onStartShouldSetResponderCapture={() => true}
+        // onStartShouldSetResponderCapture={() => true}
         onResponderTerminationRequest={() => {
-          console.log('got??/')
           return false
         }}
         onResponderGrant={composeEventHandlers(props.onResponderGrant, (event) => {
           const target = event.target as HTMLElement | number
-          const isStartingOnThumb = context.thumbs.has(event.target)
+          console.log('target', target, context.thumbs.has(target), context.thumbs)
+          const isStartingOnThumb = context.thumbs.has(target)
           // // Prevent browser focus behaviour because we focus a thumb manually when values change.
           // Touch devices have a delay before focusing so won't focus if touch immediately moves
           // away from target (sliding). We want thumb to focus regardless.
@@ -101,7 +102,6 @@ export const SliderImpl = React.forwardRef<SliderImplElement, SliderImplProps>(
           onSlideStart(event, isStartingOnThumb ? 'thumb' : 'track')
         })}
         onResponderMove={composeEventHandlers(props.onResponderMove, (event) => {
-          console.log('gogo')
           event.preventDefault()
           event.stopPropagation()
 

package/src/helpers.tsx

@@ -1,5 +1,3 @@
-import { SizeTokens, getTokens, getVariableValue } from '@tamagui/core'
-
 export function getNextSortedValues(prevValues: number[] = [], nextValue: number, atIndex: number) {
   const nextValues = [...prevValues]
   nextValues[atIndex] = nextValue

package/src/types.ts

@@ -1,14 +1,11 @@
 import type { GestureReponderEvent, SizeTokens } from '@tamagui/core'
 import type { Scope } from '@tamagui/create-context'
 import type { SizableStackProps } from '@tamagui/stacks'
-import type { View } from 'react-native'
 
 export type ScopedProps<P> = P & { __scopeSlider?: Scope }
 
 export type Direction = 'ltr' | 'rtl'
 
-export type SliderImplElement = HTMLElement | View
-
 type SliderImplPrivateProps = {
   onSlideStart(event: GestureReponderEvent, target: 'thumb' | 'track'): void
   onSlideMove(event: GestureReponderEvent): void