@tamagui/slider 1.0.1-beta.59 → 1.0.1-beta.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/slider",
-  "version": "1.0.1-beta.59",
+  "version": "1.0.1-beta.60",
   "sideEffects": true,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -8,6 +8,7 @@
   "module": "dist/esm",
   "module:jsx": "dist/jsx",
   "files": [
+    "src",
     "types",
     "dist"
   ],
@@ -18,12 +19,12 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/compose-refs": "^1.0.1-beta.59",
-    "@tamagui/core": "^1.0.1-beta.59",
-    "@tamagui/create-context": "^1.0.1-beta.59",
-    "@tamagui/stacks": "^1.0.1-beta.59",
-    "@tamagui/use-controllable-state": "^1.0.1-beta.59",
-    "@tamagui/use-direction": "^1.0.1-beta.59"
+    "@tamagui/compose-refs": "^1.0.1-beta.60",
+    "@tamagui/core": "^1.0.1-beta.60",
+    "@tamagui/create-context": "^1.0.1-beta.60",
+    "@tamagui/stacks": "^1.0.1-beta.60",
+    "@tamagui/use-controllable-state": "^1.0.1-beta.60",
+    "@tamagui/use-direction": "^1.0.1-beta.60"
   },
   "peerDependencies": {
     "react": "*",
@@ -31,7 +32,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.59",
+    "@tamagui/build": "^1.0.1-beta.60",
     "@types/react-native": "^0.67.3",
     "react": "*",
     "react-dom": "*",

package/src/Slider.tsx

@@ -0,0 +1,584 @@
+// forked from radix-ui
+
+import { useComposedRefs } from '@tamagui/compose-refs'
+import { getButtonSize, getSize, isWeb, styled, withStaticProperties } from '@tamagui/core'
+import { clamp, composeEventHandlers } from '@tamagui/helpers'
+import { SizableStackProps, ThemeableStack, YStackProps } 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 {
+  ARROW_KEYS,
+  BACK_KEYS,
+  PAGE_KEYS,
+  SLIDER_NAME,
+  SliderOrientationProvider,
+  SliderProvider,
+  useSliderContext,
+  useSliderOrientationContext,
+} from './constants'
+import {
+  convertValueToPercentage,
+  getClosestValueIndex,
+  getDecimalCount,
+  getLabel,
+  getNextSortedValues,
+  getThumbInBoundsOffset,
+  hasMinStepsBetweenValues,
+  linearScale,
+  roundValue,
+} from './helpers'
+import { SliderFrame, SliderImpl } from './SliderImpl'
+import {
+  ScopedProps,
+  SliderContextValue,
+  SliderHorizontalProps,
+  SliderImplElement,
+  SliderProps,
+  SliderTrackProps,
+  SliderVerticalProps,
+} from './types'
+
+/* -------------------------------------------------------------------------------------------------
+ * SliderHorizontal
+ * -----------------------------------------------------------------------------------------------*/
+
+type SliderHorizontalElement = SliderImplElement
+
+const SliderHorizontal = React.forwardRef<SliderHorizontalElement, 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)
+
+    function getValueFromPointer(pointerPosition: number) {
+      const layout = layoutRef.current
+      if (!layout) return
+      const input: [number, number] = [0, layout.width]
+      const output: [number, number] = isDirectionLTR ? [min, max] : [max, min]
+      const value = linearScale(input, output)
+      return value(pointerPosition)
+    }
+
+    return (
+      <SliderOrientationProvider
+        scope={props.__scopeSlider}
+        startEdge={isDirectionLTR ? 'left' : 'right'}
+        endEdge={isDirectionLTR ? 'right' : 'left'}
+        direction={isDirectionLTR ? 1 : -1}
+        sizeProp="width"
+        size={size}
+      >
+        <SliderImpl
+          ref={forwardedRef}
+          dir={direction}
+          {...sliderProps}
+          orientation="horizontal"
+          onLayout={(e) => {
+            const layout = e.nativeEvent.layout
+            layoutRef.current = layout
+            setSize(layout.height)
+          }}
+          onSlideStart={(event, target) => {
+            const value = getValueFromPointer(event.nativeEvent.locationX)
+            if (value) {
+              onSlideStart?.(value, target)
+            }
+          }}
+          onSlideMove={(event) => {
+            const value = getValueFromPointer(event.nativeEvent.locationX)
+            if (value) {
+              onSlideMove?.(value)
+            }
+          }}
+          onSlideEnd={() => {}}
+          onStepKeyDown={(event) => {
+            const isBackKey = BACK_KEYS[direction].includes(event.key)
+            onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 })
+          }}
+        />
+      </SliderOrientationProvider>
+    )
+  }
+)
+
+/* -------------------------------------------------------------------------------------------------
+ * SliderVertical
+ * -----------------------------------------------------------------------------------------------*/
+
+type SliderVerticalElement = SliderImplElement
+
+const SliderVertical = React.forwardRef<SliderVerticalElement, 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)
+
+    function getValueFromPointer(pointerPosition: number) {
+      const layout = layoutRef.current
+      if (!layout) return
+      const input: [number, number] = [0, layout.height]
+      const output: [number, number] = [max, min]
+      const value = linearScale(input, output)
+      return value(pointerPosition)
+    }
+
+    return (
+      <SliderOrientationProvider
+        scope={props.__scopeSlider}
+        startEdge="bottom"
+        endEdge="top"
+        sizeProp="height"
+        size={size}
+        direction={1}
+      >
+        <SliderImpl
+          ref={forwardedRef}
+          {...sliderProps}
+          orientation="vertical"
+          onLayout={(e) => {
+            const layout = e.nativeEvent.layout
+            layoutRef.current = layout
+            setSize(layout.height)
+          }}
+          onSlideStart={(event, target) => {
+            const value = getValueFromPointer(event.nativeEvent.locationY)
+            if (value) {
+              onSlideStart?.(value, target)
+            }
+          }}
+          onSlideMove={(event) => {
+            const value = getValueFromPointer(event.nativeEvent.locationY)
+            if (value) {
+              onSlideMove?.(value)
+            }
+          }}
+          onSlideEnd={() => {}}
+          onStepKeyDown={(event) => {
+            const isBackKey = BACK_KEYS.ltr.includes(event.key)
+            onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 })
+          }}
+        />
+      </SliderOrientationProvider>
+    )
+  }
+)
+
+/* -------------------------------------------------------------------------------------------------
+ * SliderTrack
+ * -----------------------------------------------------------------------------------------------*/
+
+const TRACK_NAME = 'SliderTrack'
+
+type SliderTrackElement = HTMLElement | View
+
+const SliderTrackFrame = styled(SliderFrame, {
+  name: 'SliderTrack',
+  height: '100%',
+  width: '100%',
+  backgroundColor: '$background',
+  position: 'relative',
+  borderRadius: 100_000,
+  overflow: 'hidden',
+})
+
+const SliderTrack = React.forwardRef<SliderTrackElement, SliderTrackProps>(
+  (props: ScopedProps<SliderTrackProps>, forwardedRef) => {
+    const { __scopeSlider, ...trackProps } = props
+    const context = useSliderContext(TRACK_NAME, __scopeSlider)
+    return (
+      <SliderTrackFrame
+        data-disabled={context.disabled ? '' : undefined}
+        data-orientation={context.orientation}
+        orientation={context.orientation}
+        size={context.size}
+        {...trackProps}
+        ref={forwardedRef}
+      />
+    )
+  }
+)
+
+SliderTrack.displayName = TRACK_NAME
+
+/* -------------------------------------------------------------------------------------------------
+ * SliderTrackActive
+ * -----------------------------------------------------------------------------------------------*/
+
+const RANGE_NAME = 'SliderTrackActive'
+
+type SliderTrackActiveElement = HTMLElement | View
+interface SliderTrackActiveProps extends YStackProps {}
+
+const SliderTrackActiveFrame = styled(SliderFrame, {
+  name: 'SliderTrackActive',
+  backgroundColor: '$background',
+  position: 'absolute',
+})
+
+const SliderTrackActive = React.forwardRef<SliderTrackActiveElement, 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 composedRefs = useComposedRefs(forwardedRef, ref)
+    const valuesCount = context.values.length
+    const percentages = context.values.map((value) =>
+      convertValueToPercentage(value, context.min, context.max)
+    )
+    const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0
+    const offsetEnd = 100 - Math.max(...percentages)
+
+    return (
+      <SliderTrackActiveFrame
+        orientation={context.orientation}
+        data-orientation={context.orientation}
+        data-disabled={context.disabled ? '' : undefined}
+        size={context.size}
+        {...rangeProps}
+        ref={composedRefs}
+        {...{
+          [orientation.startEdge]: offsetStart + '%',
+          [orientation.endEdge]: offsetEnd + '%',
+        }}
+        {...(orientation.sizeProp === 'width'
+          ? {
+              height: '100%',
+            }
+          : {
+              left: 0,
+              right: 0,
+            })}
+      />
+    )
+  }
+)
+
+SliderTrackActive.displayName = RANGE_NAME
+
+/* -------------------------------------------------------------------------------------------------
+ * SliderThumb
+ * -----------------------------------------------------------------------------------------------*/
+
+const THUMB_NAME = 'SliderThumb'
+
+const SliderThumbFrame = styled(ThemeableStack, {
+  name: 'SliderThumb',
+  position: 'absolute',
+  // TODO not taking up 2
+  bordered: 2,
+  // OR THIS
+  borderWidth: 2,
+  backgrounded: true,
+  pressable: true,
+  focusable: true,
+  hoverable: true,
+
+  variants: {
+    size: {
+      '...size': (val) => {
+        const size = typeof val === 'number' ? val : getSize(val, -1)
+        return {
+          width: size,
+          height: size,
+          minWidth: size,
+          minHeight: size,
+        }
+      },
+    },
+  },
+})
+
+type SliderThumbElement = HTMLElement | View
+interface SliderThumbProps extends SizableStackProps {
+  index: number
+}
+
+const SliderThumb = React.forwardRef<SliderThumbElement, SliderThumbProps>(
+  (props: ScopedProps<SliderThumbProps>, forwardedRef) => {
+    const { __scopeSlider, index, size: sizeProp, ...thumbProps } = props
+    const context = useSliderContext(THUMB_NAME, __scopeSlider)
+    const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider)
+    const [thumb, setThumb] = React.useState<View | HTMLElement | null>(null)
+    const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node))
+
+    // We cast because index could be `-1` which would return undefined
+    const value = context.values[index] as number | undefined
+    const percent =
+      value === undefined ? 0 : convertValueToPercentage(value, context.min, context.max)
+    const label = getLabel(index, context.values.length)
+    const [size, setSize] = React.useState(0)
+
+    const thumbInBoundsOffset = size
+      ? getThumbInBoundsOffset(size, percent, orientation.direction)
+      : 0
+
+    React.useEffect(() => {
+      if (thumb) {
+        context.thumbs.add(thumb)
+        return () => {
+          context.thumbs.delete(thumb)
+        }
+      }
+    }, [thumb, context.thumbs])
+
+    return (
+      <SliderThumbFrame
+        ref={composedRefs}
+        // TODO
+        // @ts-ignore
+        role="slider"
+        aria-label={props['aria-label'] || label}
+        aria-valuemin={context.min}
+        aria-valuenow={value}
+        aria-valuemax={context.max}
+        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'
+          ? {
+              x: thumbInBoundsOffset - size / 2,
+              y: -size / 2,
+              top: '50%',
+              ...(size === 0 && {
+                top: 'auto',
+                bottom: 'auto',
+              }),
+            }
+          : {
+              x: -size / 2,
+              y: size / 2,
+              left: '50%',
+              ...(size === 0 && {
+                left: 'auto',
+                right: 'auto',
+              }),
+            })}
+        size={sizeProp ?? context.size ?? '$4'}
+        onLayout={(e) => {
+          setSize(e.nativeEvent.layout[orientation.sizeProp])
+        }}
+        {...{
+          [orientation.startEdge]: `${percent}%`,
+        }}
+        /**
+         * There will be no value on initial render while we work out the index so we hide thumbs
+         * without a value, otherwise SSR will render them in the wrong position before they
+         * snap into the correct position during hydration which would be visually jarring for
+         * slower connections.
+         */
+        // style={value === undefined ? { display: 'none' } : props.style}
+        onFocus={composeEventHandlers(props.onFocus, () => {
+          context.valueIndexToChangeRef.current = index
+        })}
+      />
+    )
+  }
+)
+
+SliderThumb.displayName = THUMB_NAME
+
+/* -------------------------------------------------------------------------------------------------
+ * Slider
+ * -----------------------------------------------------------------------------------------------*/
+
+type SliderElement = SliderHorizontalElement | SliderVerticalElement
+
+const Slider = withStaticProperties(
+  React.forwardRef<SliderElement, SliderProps>((props: ScopedProps<SliderProps>, forwardedRef) => {
+    const {
+      name,
+      min = 0,
+      max = 100,
+      step = 1,
+      orientation = 'horizontal',
+      disabled = false,
+      minStepsBetweenThumbs = 0,
+      defaultValue = [min],
+      value,
+      onValueChange = () => {},
+      size: sizeProp,
+      ...sliderProps
+    } = props
+    const sliderRef = React.useRef<SliderImplElement>(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 [values = [], setValues] = useControllableState({
+      prop: value,
+      defaultProp: defaultValue,
+      onChange: (value) => {
+        if (isWeb) {
+          const thumbs = [...thumbRefs.current]
+          thumbs[valueIndexToChangeRef.current]?.focus()
+        }
+        onValueChange(value)
+      },
+    })
+
+    if (isWeb) {
+      React.useEffect(() => {
+        const node = sliderRef.current as HTMLElement
+        if (!node) return
+        const preventDefault = (e) => {
+          e.preventDefault()
+        }
+        node.addEventListener('touchstart', preventDefault)
+        return () => {
+          node.removeEventListener('touchstart', preventDefault)
+        }
+      }, [])
+    }
+
+    function handleSlideMove(value: number) {
+      updateValues(value, valueIndexToChangeRef.current)
+    }
+
+    function updateValues(value: number, atIndex: number) {
+      const decimalCount = getDecimalCount(step)
+      const snapToStep = roundValue(Math.round((value - min) / step) * step + min, decimalCount)
+      const nextValue = clamp(snapToStep, [min, max])
+      setValues((prevValues = []) => {
+        const nextValues = getNextSortedValues(prevValues, nextValue, atIndex)
+        if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {
+          valueIndexToChangeRef.current = nextValues.indexOf(nextValue)
+          return String(nextValues) === String(prevValues) ? prevValues : nextValues
+        } else {
+          return prevValues
+        }
+      })
+    }
+
+    const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical
+
+    return (
+      <SliderProvider
+        scope={props.__scopeSlider}
+        disabled={disabled}
+        min={min}
+        max={max}
+        valueIndexToChangeRef={valueIndexToChangeRef}
+        thumbs={thumbRefs.current}
+        values={values}
+        orientation={orientation}
+        size={sizeProp}
+      >
+        <SliderOriented
+          aria-disabled={disabled}
+          data-disabled={disabled ? '' : undefined}
+          {...sliderProps}
+          ref={composedRefs}
+          min={min}
+          max={max}
+          onSlideStart={
+            disabled
+              ? undefined
+              : (value: number, target) => {
+                  // when starting on the track, move it right away
+                  // when starting on thumb, dont jump until movemenet as it feels weird
+                  if (target !== 'thumb') {
+                    const closestIndex = getClosestValueIndex(values, value)
+                    updateValues(value, closestIndex)
+                  }
+                }
+          }
+          onSlideMove={disabled ? undefined : handleSlideMove}
+          onHomeKeyDown={() => !disabled && updateValues(min, 0)}
+          onEndKeyDown={() => !disabled && updateValues(max, values.length - 1)}
+          onStepKeyDown={({ event, direction: stepDirection }) => {
+            if (!disabled) {
+              const isPageKey = PAGE_KEYS.includes(event.key)
+              const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key))
+              const multiplier = isSkipKey ? 10 : 1
+              const atIndex = valueIndexToChangeRef.current
+              const value = values[atIndex]
+              const stepInDirection = step * multiplier * stepDirection
+              updateValues(value + stepInDirection, atIndex)
+            }
+          }}
+        />
+        {/* {isFormControl &&
+          values.map((value, index) => (
+            <BubbleInput
+              key={index}
+              name={name ? name + (values.length > 1 ? '[]' : '') : undefined}
+              value={value}
+            />
+          ))} */}
+      </SliderProvider>
+    )
+  }),
+  {
+    Track: SliderTrack,
+    TrackActive: SliderTrackActive,
+    Thumb: SliderThumb,
+  }
+)
+
+Slider.displayName = SLIDER_NAME
+
+/* -----------------------------------------------------------------------------------------------*/
+
+// TODO
+// const BubbleInput = (props: any) => {
+//   const { value, ...inputProps } = props
+//   const ref = React.useRef<HTMLInputElement>(null)
+//   const prevValue = usePrevious(value)
+
+//   // Bubble value change to parents (e.g form change event)
+//   React.useEffect(() => {
+//     const input = ref.current!
+//     const inputProto = window.HTMLInputElement.prototype
+//     const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value') as PropertyDescriptor
+//     const setValue = descriptor.set
+//     if (prevValue !== value && setValue) {
+//       const event = new Event('input', { bubbles: true })
+//       setValue.call(input, value)
+//       input.dispatchEvent(event)
+//     }
+//   }, [prevValue, value])
+
+//   /**
+//    * We purposefully do not use `type="hidden"` here otherwise forms that
+//    * wrap it will not be able to access its value via the FormData API.
+//    *
+//    * We purposefully do not add the `value` attribute here to allow the value
+//    * to be set programatically and bubble to any parent form `onChange` event.
+//    * Adding the `value` will cause React to consider the programatic
+//    * dispatch a duplicate and it will get swallowed.
+//    */
+//   return <input style={{ display: 'none' }} {...inputProps} ref={ref} defaultValue={value} />
+// }
+
+/* -----------------------------------------------------------------------------------------------*/
+
+const Track = SliderTrack
+const Range = SliderTrackActive
+const Thumb = SliderThumb
+
+export {
+  Slider,
+  SliderTrack,
+  SliderTrackActive,
+  SliderThumb,
+  //
+  Track,
+  Range,
+  Thumb,
+}
+
+export type { SliderProps, SliderTrackProps, SliderTrackActiveProps, SliderThumbProps }

package/src/SliderImpl.tsx

@@ -0,0 +1,105 @@
+/* -------------------------------------------------------------------------------------------------
+ * SliderImpl
+ * -----------------------------------------------------------------------------------------------*/
+
+import { composeEventHandlers, getSize, getVariableValue, isWeb, styled } from '@tamagui/core'
+import { YStack } from '@tamagui/stacks'
+import * as React from 'react'
+
+import { ARROW_KEYS, PAGE_KEYS, SLIDER_NAME, useSliderContext } from './constants'
+import { ScopedProps, SliderImplElement, SliderImplProps } from './types'
+
+export const DirectionalYStack = styled(YStack, {
+  variants: {
+    orientation: {
+      horizontal: {},
+      vertical: {},
+    },
+  },
+})
+
+export const SliderFrame = styled(DirectionalYStack, {
+  position: 'relative',
+
+  variants: {
+    size: (val, extras) => {
+      const orientation = extras.props.orientation
+      const size = Math.round(getVariableValue(getSize(val)) / 6)
+      if (orientation === 'horizontal') {
+        return {
+          height: size,
+          borderRadius: size,
+          justifyContent: 'center',
+        }
+      }
+      return {
+        width: size,
+        borderRadius: size,
+        alignItems: 'center',
+      }
+    },
+  },
+})
+
+export const SliderImpl = React.forwardRef<SliderImplElement, SliderImplProps>(
+  (props: ScopedProps<SliderImplProps>, forwardedRef) => {
+    const {
+      __scopeSlider,
+      onSlideStart,
+      onSlideMove,
+      onSlideEnd,
+      onHomeKeyDown,
+      onEndKeyDown,
+      onStepKeyDown,
+      ...sliderProps
+    } = props
+    const context = useSliderContext(SLIDER_NAME, __scopeSlider)
+    return (
+      <SliderFrame
+        size="$4"
+        {...sliderProps}
+        data-orientation={sliderProps.orientation}
+        ref={forwardedRef}
+        {...(isWeb && {
+          onKeyDown: (event) => {
+            if (event.key === 'Home') {
+              onHomeKeyDown(event)
+              // Prevent scrolling to page start
+              event.preventDefault()
+            } else if (event.key === 'End') {
+              onEndKeyDown(event)
+              // Prevent scrolling to page end
+              event.preventDefault()
+            } else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {
+              onStepKeyDown(event)
+              // Prevent scrolling for directional key presses
+              event.preventDefault()
+            }
+          },
+        })}
+        onStartShouldSetResponder={() => true}
+        onResponderGrant={composeEventHandlers(props.onResponderGrant, (event) => {
+          const target = event.target as HTMLElement | number
+          const isStartingOnThumb = context.thumbs.has(event.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.
+          if (isWeb && target instanceof HTMLElement) {
+            if (context.thumbs.has(target)) {
+              target.focus()
+            }
+          }
+          onSlideStart(event, isStartingOnThumb ? 'thumb' : 'track')
+        })}
+        onResponderMove={composeEventHandlers(props.onResponderMove, (event) => {
+          // const target = event.target as HTMLElement
+          onSlideMove(event)
+        })}
+        onResponderRelease={composeEventHandlers(props.onResponderRelease, (event) => {
+          // const target = event.target as HTMLElement
+          onSlideEnd(event)
+        })}
+      />
+    )
+  }
+)

package/src/constants.tsx

@@ -0,0 +1,32 @@
+import { SizeTokens } from '@tamagui/core'
+import { createContextScope } from '@tamagui/create-context'
+
+import { Direction, SliderContextValue } from './types'
+
+export const SLIDER_NAME = 'Slider'
+
+export const [createSliderContext, createSliderScope] = createContextScope(SLIDER_NAME)
+
+export const [SliderProvider, useSliderContext] =
+  createSliderContext<SliderContextValue>(SLIDER_NAME)
+
+export const [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext<{
+  startEdge: 'bottom' | 'left' | 'right'
+  endEdge: 'top' | 'right' | 'left'
+  sizeProp: 'width' | 'height'
+  size: number | SizeTokens
+  direction: number
+}>(SLIDER_NAME, {
+  startEdge: 'left',
+  endEdge: 'right',
+  sizeProp: 'width',
+  size: 0,
+  direction: 1,
+})
+
+export const PAGE_KEYS = ['PageUp', 'PageDown']
+export const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']
+export const BACK_KEYS: Record<Direction, string[]> = {
+  ltr: ['ArrowDown', 'Home', 'ArrowLeft', 'PageDown'],
+  rtl: ['ArrowDown', 'Home', 'ArrowRight', 'PageDown'],
+}

package/src/helpers.tsx

@@ -0,0 +1,102 @@
+import { SizeTokens, getTokens, getVariableValue } from '@tamagui/core'
+
+export function getNextSortedValues(prevValues: number[] = [], nextValue: number, atIndex: number) {
+  const nextValues = [...prevValues]
+  nextValues[atIndex] = nextValue
+  return nextValues.sort((a, b) => a - b)
+}
+
+export function convertValueToPercentage(value: number, min: number, max: number) {
+  const maxSteps = max - min
+  const percentPerStep = 100 / maxSteps
+  return percentPerStep * (value - min)
+}
+
+/**
+ * Returns a label for each thumb when there are two or more thumbs
+ */
+export function getLabel(index: number, totalValues: number) {
+  if (totalValues > 2) {
+    return `Value ${index + 1} of ${totalValues}`
+  } else if (totalValues === 2) {
+    return ['Minimum', 'Maximum'][index]
+  } else {
+    return undefined
+  }
+}
+
+/**
+ * Given a `values` array and a `nextValue`, determine which value in
+ * the array is closest to `nextValue` and return its index.
+ *
+ * @example
+ * // returns 1
+ * getClosestValueIndex([10, 30], 25);
+ */
+export function getClosestValueIndex(values: number[], nextValue: number) {
+  if (values.length === 1) return 0
+  const distances = values.map((value) => Math.abs(value - nextValue))
+  const closestDistance = Math.min(...distances)
+  return distances.indexOf(closestDistance)
+}
+
+/**
+ * Offsets the thumb centre point while sliding to ensure it remains
+ * within the bounds of the slider when reaching the edges
+ */
+export function getThumbInBoundsOffset(width: number, left: number, direction: number) {
+  const halfWidth = width / 2
+  const halfPercent = 50
+  const offset = linearScale([0, halfPercent], [0, halfWidth])
+  return (halfWidth - offset(left) * direction) * direction
+}
+
+/**
+ * Gets an array of steps between each value.
+ *
+ * @example
+ * // returns [1, 9]
+ * getStepsBetweenValues([10, 11, 20]);
+ */
+function getStepsBetweenValues(values: number[]) {
+  return values.slice(0, -1).map((value, index) => values[index + 1] - value)
+}
+
+/**
+ * Verifies the minimum steps between all values is greater than or equal
+ * to the expected minimum steps.
+ *
+ * @example
+ * // returns false
+ * hasMinStepsBetweenValues([1,2,3], 2);
+ *
+ * @example
+ * // returns true
+ * hasMinStepsBetweenValues([1,2,3], 1);
+ */
+export function hasMinStepsBetweenValues(values: number[], minStepsBetweenValues: number) {
+  if (minStepsBetweenValues > 0) {
+    const stepsBetweenValues = getStepsBetweenValues(values)
+    const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues)
+    return actualMinStepsBetweenValues >= minStepsBetweenValues
+  }
+  return true
+}
+
+// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js
+export function linearScale(input: readonly [number, number], output: readonly [number, number]) {
+  return (value: number) => {
+    if (input[0] === input[1] || output[0] === output[1]) return output[0]
+    const ratio = (output[1] - output[0]) / (input[1] - input[0])
+    return output[0] + ratio * (value - input[0])
+  }
+}
+
+export function getDecimalCount(value: number) {
+  return (String(value).split('.')[1] || '').length
+}
+
+export function roundValue(value: number, decimalCount: number) {
+  const rounder = Math.pow(10, decimalCount)
+  return Math.round(value * rounder) / rounder
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from './Slider'
+export type {
+  SliderProps,
+  SliderHorizontalProps,
+  SliderVerticalProps,
+  SliderTrackProps,
+} from './types'

package/src/types.ts

@@ -0,0 +1,78 @@
+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
+  onSlideEnd(event: GestureReponderEvent): void
+  onHomeKeyDown(event: React.KeyboardEvent): void
+  onEndKeyDown(event: React.KeyboardEvent): void
+  onStepKeyDown(event: React.KeyboardEvent): void
+}
+
+export interface SliderTrackProps extends SizableStackProps {}
+
+export interface SliderImplProps extends SliderTrackProps, SliderImplPrivateProps {
+  dir?: Direction
+  orientation: 'horizontal' | 'vertical'
+}
+
+type SliderOrientationPrivateProps = {
+  min: number
+  max: number
+  onSlideStart?(value: number, target: 'thumb' | 'track'): void
+  onSlideMove?(value: number): void
+  onHomeKeyDown(event: React.KeyboardEvent): void
+  onEndKeyDown(event: React.KeyboardEvent): void
+  onStepKeyDown(step: { event: React.KeyboardEvent; direction: number }): void
+}
+
+interface SliderOrientationProps
+  extends Omit<SliderImplProps, keyof SliderImplPrivateProps | 'orientation'>,
+    SliderOrientationPrivateProps {}
+
+export interface SliderHorizontalProps extends SliderOrientationProps {
+  dir?: Direction
+}
+
+export interface SliderVerticalProps extends SliderOrientationProps {
+  dir?: Direction
+}
+
+export interface SliderProps
+  extends Omit<
+    SliderHorizontalProps | SliderVerticalProps,
+    keyof SliderOrientationPrivateProps | 'defaultValue'
+  > {
+  size?: SizeTokens
+  name?: string
+  disabled?: boolean
+  orientation?: React.AriaAttributes['aria-orientation']
+  dir?: Direction
+  min?: number
+  max?: number
+  step?: number
+  minStepsBetweenThumbs?: number
+  value?: number[]
+  defaultValue?: number[]
+  onValueChange?(value: number[]): void
+}
+
+export type SliderContextValue = {
+  size?: SizeTokens | number | null
+  disabled?: boolean
+  min: number
+  max: number
+  values: number[]
+  valueIndexToChangeRef: React.MutableRefObject<number>
+  thumbs: Set<any>
+  orientation: SliderProps['orientation']
+}