@react-native-aria/slider 0.2.5 → 0.2.7

package/lib/commonjs/useSlider.js

@@ -23,7 +23,7 @@ var _utils2 = require("@react-native-aria/utils");
  * accepts click and drag motions, so that the closest thumb will follow clicks and drags on
  * the track.
  */
-function useSlider(props, state, trackLayout) {
+function useSlider(props, state, trackLayout, isReversed) {
   var _labelProps$id;
 
   let {
@@ -38,6 +38,7 @@ function useSlider(props, state, trackLayout) {
 
   let onDownTrack = (e, id, clientX, clientY) => {
     const direction = (0, _utils2.isRTL)() ? 'rtl' : undefined;
+    const reverseX = isReversed || direction === 'rtl';
 
     if (!props.isDisabled && state.values.every((_, i) => !state.isThumbDragging(i))) {
       let size = isVertical ? trackLayout.height : trackLayout.width; // Find the closest thumb
@@ -47,8 +48,14 @@ function useSlider(props, state, trackLayout) {
       const offset = clickPosition - trackPosition;
       let percent = offset / size;
 
-      if (direction === 'rtl' || isVertical) {
-        percent = 1 - percent;
+      if (reverseX) {
+        if (!isVertical) {
+          percent = 1 - percent;
+        }
+      } else {
+        if (isVertical) {
+          percent = 1 - percent;
+        }
       }
 
       let value = state.getPercentValue(percent); // to find the closet thumb we split the array based on the first thumb position to the "right/end" of the click.

package/lib/commonjs/useSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSlider.ts"],"names":["useSlider","props","state","trackLayout","labelProps","fieldProps","isVertical","orientation","sliderIds","set","id","currentPointer","undefined","onDownTrack","e","clientX","clientY","direction","isDisabled","values","every","_","i","isThumbDragging","size","height","width","trackPosition","clickPosition","offset","percent","value","getPercentValue","closestThumb","split","findIndex","v","length","lastLeft","firstRight","Math","abs","isThumbEditable","preventDefault","setFocusedThumb","current","setThumbDragging","setThumbValue","groupProps","trackProps","onPress","locationX","locationY","nativeEvent","outputProps"],"mappings":"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","sourcesContent":["import { sliderIds } from './utils';\nimport { AriaSliderProps } from '@react-types/slider';\nimport React, { useRef } from 'react';\nimport { SliderState } from '@react-stately/slider';\nimport { useLabel } from '@react-aria/label';\nimport { isRTL } from '@react-native-aria/utils';\n\ninterface SliderAria {\n  /** Props for the label element. */\n  labelProps: any;\n\n  /** Props for the root element of the slider component; groups slider inputs. */\n  groupProps: any;\n\n  /** Props for the track element. */\n  trackProps: any;\n\n  /** Props for the output element, displaying the value of the slider thumbs. */\n  outputProps: any;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a slider component representing one or more values.\n *\n * @param props Props for the slider.\n * @param state State for the slider, as returned by `useSliderState`.\n * @param trackRef Ref for the \"track\" element.  The width of this element provides the \"length\"\n * of the track -- the span of one dimensional space that the slider thumb can be.  It also\n * accepts click and drag motions, so that the closest thumb will follow clicks and drags on\n * the track.\n */\nexport function useSlider(\n  props: AriaSliderProps,\n  state: SliderState,\n  trackLayout: any\n): SliderAria {\n  let { labelProps, fieldProps } = useLabel(props);\n\n  let isVertical = props.orientation === 'vertical';\n\n  sliderIds.set(state, labelProps.id ?? fieldProps.id);\n  let currentPointer = useRef<number | null | undefined>(undefined);\n\n  let onDownTrack = (\n    e: React.UIEvent,\n    id: number,\n    clientX: number,\n    clientY: number\n  ) => {\n    const direction = isRTL() ? 'rtl' : undefined;\n    if (\n      !props.isDisabled &&\n      state.values.every((_, i) => !state.isThumbDragging(i))\n    ) {\n      let size = isVertical ? trackLayout.height : trackLayout.width;\n      // Find the closest thumb\n      const trackPosition = trackLayout[isVertical ? 'y' : 'x'];\n      const clickPosition = isVertical ? clientY : clientX;\n      const offset = clickPosition - trackPosition;\n      let percent = offset / size;\n      if (direction === 'rtl' || isVertical) {\n        percent = 1 - percent;\n      }\n      let value = state.getPercentValue(percent);\n      // to find the closet thumb we split the array based on the first thumb position to the \"right/end\" of the click.\n      let closestThumb;\n      let split = state.values.findIndex((v) => value - v < 0);\n      if (split === 0) {\n        // If the index is zero then the closetThumb is the first one\n        closestThumb = split;\n      } else if (split === -1) {\n        // If no index is found they've clicked past all the thumbs\n        closestThumb = state.values.length - 1;\n      } else {\n        let lastLeft = state.values[split - 1];\n        let firstRight = state.values[split];\n        // Pick the last left/start thumb, unless they are stacked on top of each other, then pick the right/end one\n        if (Math.abs(lastLeft - value) < Math.abs(firstRight - value)) {\n          closestThumb = split - 1;\n        } else {\n          closestThumb = split;\n        }\n      }\n      // Confirm that the found closest thumb is editable, not disabled, and move it\n      if (closestThumb >= 0 && state.isThumbEditable(closestThumb)) {\n        // Don't unfocus anything\n        e.preventDefault();\n        state.setFocusedThumb(closestThumb);\n        currentPointer.current = id;\n        state.setThumbDragging(closestThumb, true);\n        state.setThumbValue(closestThumb, value);\n        state.setThumbDragging(closestThumb, false);\n      }\n    }\n  };\n\n  return {\n    labelProps,\n    groupProps: {},\n    trackProps: {\n      onPress: (e: any) => {\n        const { locationX, locationY } = e.nativeEvent;\n        onDownTrack(e, undefined, locationX, locationY);\n      },\n    },\n    outputProps: {},\n  };\n}\n"]}
+{"version":3,"sources":["useSlider.ts"],"names":["useSlider","props","state","trackLayout","isReversed","labelProps","fieldProps","isVertical","orientation","sliderIds","set","id","currentPointer","undefined","onDownTrack","e","clientX","clientY","direction","reverseX","isDisabled","values","every","_","i","isThumbDragging","size","height","width","trackPosition","clickPosition","offset","percent","value","getPercentValue","closestThumb","split","findIndex","v","length","lastLeft","firstRight","Math","abs","isThumbEditable","preventDefault","setFocusedThumb","current","setThumbDragging","setThumbValue","groupProps","trackProps","onPress","locationX","locationY","nativeEvent","outputProps"],"mappings":"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","sourcesContent":["import { sliderIds } from './utils';\nimport { AriaSliderProps } from '@react-types/slider';\nimport React, { useRef } from 'react';\nimport { SliderState } from '@react-stately/slider';\nimport { useLabel } from '@react-aria/label';\nimport { isRTL } from '@react-native-aria/utils';\n\ninterface SliderAria {\n  /** Props for the label element. */\n  labelProps: any;\n\n  /** Props for the root element of the slider component; groups slider inputs. */\n  groupProps: any;\n\n  /** Props for the track element. */\n  trackProps: any;\n\n  /** Props for the output element, displaying the value of the slider thumbs. */\n  outputProps: any;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a slider component representing one or more values.\n *\n * @param props Props for the slider.\n * @param state State for the slider, as returned by `useSliderState`.\n * @param trackRef Ref for the \"track\" element.  The width of this element provides the \"length\"\n * of the track -- the span of one dimensional space that the slider thumb can be.  It also\n * accepts click and drag motions, so that the closest thumb will follow clicks and drags on\n * the track.\n */\nexport function useSlider(\n  props: AriaSliderProps,\n  state: SliderState,\n  trackLayout: any,\n  isReversed?: boolean\n): SliderAria {\n  let { labelProps, fieldProps } = useLabel(props);\n\n  let isVertical = props.orientation === 'vertical';\n\n  sliderIds.set(state, labelProps.id ?? fieldProps.id);\n  let currentPointer = useRef<number | null | undefined>(undefined);\n\n  let onDownTrack = (\n    e: React.UIEvent,\n    id: number,\n    clientX: number,\n    clientY: number\n  ) => {\n    const direction = isRTL() ? 'rtl' : undefined;\n    const reverseX = isReversed || direction === 'rtl';\n    if (\n      !props.isDisabled &&\n      state.values.every((_, i) => !state.isThumbDragging(i))\n    ) {\n      let size = isVertical ? trackLayout.height : trackLayout.width;\n      // Find the closest thumb\n      const trackPosition = trackLayout[isVertical ? 'y' : 'x'];\n      const clickPosition = isVertical ? clientY : clientX;\n      const offset = clickPosition - trackPosition;\n      let percent = offset / size;\n      if (reverseX) {\n        if (!isVertical) {\n          percent = 1 - percent;\n        }\n      } else {\n        if (isVertical) {\n          percent = 1 - percent;\n        }\n      }\n      let value = state.getPercentValue(percent);\n      // to find the closet thumb we split the array based on the first thumb position to the \"right/end\" of the click.\n      let closestThumb;\n      let split = state.values.findIndex((v) => value - v < 0);\n      if (split === 0) {\n        // If the index is zero then the closetThumb is the first one\n        closestThumb = split;\n      } else if (split === -1) {\n        // If no index is found they've clicked past all the thumbs\n        closestThumb = state.values.length - 1;\n      } else {\n        let lastLeft = state.values[split - 1];\n        let firstRight = state.values[split];\n        // Pick the last left/start thumb, unless they are stacked on top of each other, then pick the right/end one\n        if (Math.abs(lastLeft - value) < Math.abs(firstRight - value)) {\n          closestThumb = split - 1;\n        } else {\n          closestThumb = split;\n        }\n      }\n      // Confirm that the found closest thumb is editable, not disabled, and move it\n      if (closestThumb >= 0 && state.isThumbEditable(closestThumb)) {\n        // Don't unfocus anything\n        e.preventDefault();\n        state.setFocusedThumb(closestThumb);\n        currentPointer.current = id;\n        state.setThumbDragging(closestThumb, true);\n        state.setThumbValue(closestThumb, value);\n        state.setThumbDragging(closestThumb, false);\n      }\n    }\n  };\n\n  return {\n    labelProps,\n    groupProps: {},\n    trackProps: {\n      onPress: (e: any) => {\n        const { locationX, locationY } = e.nativeEvent;\n        onDownTrack(e, undefined, locationX, locationY);\n      },\n    },\n    outputProps: {},\n  };\n}\n"]}

package/lib/commonjs/useSlider.web.js

@@ -19,7 +19,7 @@ var _utils3 = require("@react-native-aria/utils");
 
 var _useMove = require("./useMove");
 
-function useSliderWeb(props, state, trackLayout) {
+function useSliderWeb(props, state, trackLayout, isReversed) {
   var _labelProps$id;
 
   let {
@@ -42,7 +42,7 @@ function useSliderWeb(props, state, trackLayout) {
   const realTimeTrackDraggingIndex = (0, _react.useRef)(null);
   const stateRef = (0, _react.useRef)(null);
   stateRef.current = state;
-  const reverseX = direction === 'rtl';
+  const reverseX = isReversed || direction === 'rtl';
   const currentPosition = (0, _react.useRef)(null);
   const {
     moveProps
@@ -63,8 +63,14 @@ function useSliderWeb(props, state, trackLayout) {
 
       let delta = isVertical ? deltaY : deltaX;
 
-      if (isVertical || reverseX) {
-        delta = -delta;
+      if (reverseX) {
+        if (!isVertical) {
+          delta = -delta;
+        }
+      } else {
+        if (isVertical) {
+          delta = -delta;
+        }
       }
 
       currentPosition.current += delta;
@@ -95,8 +101,14 @@ function useSliderWeb(props, state, trackLayout) {
       const offset = clickPosition - trackPosition;
       let percent = offset / size;
 
-      if (direction === 'rtl' || isVertical) {
-        percent = 1 - percent;
+      if (reverseX) {
+        if (!isVertical) {
+          percent = 1 - percent;
+        }
+      } else {
+        if (isVertical) {
+          percent = 1 - percent;
+        }
       }
 
       let value = state.getPercentValue(percent); // to find the closet thumb we split the array based on the first thumb position to the "right/end" of the click.
@@ -211,11 +223,11 @@ function useSliderWeb(props, state, trackLayout) {
   };
 }
 
-const useSlider = (props, state, ref) => {
+const useSlider = (props, state, ref, isReversed) => {
   let {
     groupProps: webGroupProps,
     ...rest
-  } = useSliderWeb(props, state, ref);
+  } = useSliderWeb(props, state, ref, isReversed);
   let groupProps = (0, _utils3.mapDomPropsToRN)(webGroupProps);
   let labelProps = (0, _utils3.mapDomPropsToRN)(rest.labelProps);
   return {

package/lib/commonjs/useSlider.web.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSlider.web.ts"],"names":["useSliderWeb","props","state","trackLayout","labelProps","fieldProps","isVertical","orientation","sliderIds","set","id","direction","undefined","addGlobalListener","removeGlobalListener","realTimeTrackDraggingIndex","stateRef","current","reverseX","currentPosition","moveProps","onMoveStart","onMove","deltaX","deltaY","size","height","width","getThumbPercent","delta","percent","setThumbPercent","onMoveEnd","setThumbDragging","currentPointer","onDownTrack","e","clientX","clientY","isDisabled","values","every","_","i","isThumbDragging","trackPosition","clickPosition","offset","value","getPercentValue","closestThumb","split","findIndex","v","length","lastLeft","firstRight","Math","abs","isThumbEditable","preventDefault","setFocusedThumb","setThumbValue","window","onUpTrack","pointerId","changedTouches","identifier","htmlFor","onClick","document","getElementById","focus","groupProps","role","trackProps","onMouseDown","button","altKey","ctrlKey","metaKey","onPointerDown","pointerType","onTouchStart","outputProps","map","index","join","useSlider","ref","webGroupProps","rest"],"mappings":"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","sourcesContent":["import { AriaSliderProps } from '@react-types/slider';\nimport { clamp, mergeProps, useGlobalListeners } from '@react-aria/utils';\nimport { getSliderThumbId, sliderIds } from './utils';\nimport React, { useRef } from 'react';\nimport { setInteractionModality } from '@react-aria/interactions';\nimport { SliderState } from '@react-stately/slider';\nimport { useLabel } from '@react-aria/label';\nimport { mapDomPropsToRN, isRTL } from '@react-native-aria/utils';\nimport { useMove } from './useMove';\n\ninterface SliderAria {\n  /** Props for the label element. */\n  labelProps: any;\n\n  /** Props for the root element of the slider component; groups slider inputs. */\n  groupProps: any;\n\n  /** Props for the track element. */\n  trackProps: any;\n\n  /** Props for the output element, displaying the value of the slider thumbs. */\n  outputProps: any;\n}\n\nfunction useSliderWeb(\n  props: AriaSliderProps,\n  state: SliderState,\n  trackLayout: {\n    height: number;\n    width: number;\n    top: number;\n    left: number;\n    x: number;\n    y: number;\n  }\n): SliderAria {\n  let { labelProps, fieldProps } = useLabel(props);\n\n  let isVertical = props.orientation === 'vertical';\n\n  // Attach id of the label to the state so it can be accessed by useSliderThumb.\n  sliderIds.set(state, labelProps.id ?? fieldProps.id);\n\n  const direction = isRTL() ? 'rtl' : undefined;\n\n  let { addGlobalListener, removeGlobalListener } = useGlobalListeners();\n\n  // When the user clicks or drags the track, we want the motion to set and drag the\n  // closest thumb.  Hence we also need to install useMove() on the track element.\n  // Here, we keep track of which index is the \"closest\" to the drag start point.\n  // It is set onMouseDown/onTouchDown; see trackProps below.\n  const realTimeTrackDraggingIndex = useRef<number | null>(null);\n\n  const stateRef = useRef<SliderState>(null);\n  stateRef.current = state;\n  const reverseX = direction === 'rtl';\n  const currentPosition = useRef<number>(null);\n  const { moveProps } = useMove({\n    onMoveStart() {\n      currentPosition.current = null;\n    },\n    onMove({ deltaX, deltaY }) {\n      let size = isVertical ? trackLayout.height : trackLayout.width;\n\n      if (currentPosition.current == null) {\n        currentPosition.current =\n          stateRef.current.getThumbPercent(realTimeTrackDraggingIndex.current) *\n          size;\n      }\n\n      let delta = isVertical ? deltaY : deltaX;\n      if (isVertical || reverseX) {\n        delta = -delta;\n      }\n\n      currentPosition.current += delta;\n\n      if (realTimeTrackDraggingIndex.current != null) {\n        const percent = clamp(currentPosition.current / size, 0, 1);\n        stateRef.current.setThumbPercent(\n          realTimeTrackDraggingIndex.current,\n          percent\n        );\n      }\n    },\n    onMoveEnd() {\n      if (realTimeTrackDraggingIndex.current != null) {\n        stateRef.current.setThumbDragging(\n          realTimeTrackDraggingIndex.current,\n          false\n        );\n        realTimeTrackDraggingIndex.current = null;\n      }\n    },\n  });\n\n  let currentPointer = useRef<number | null | undefined>(undefined);\n  let onDownTrack = (\n    e: React.UIEvent,\n    id: number,\n    clientX: number,\n    clientY: number\n  ) => {\n    // We only trigger track-dragging if the user clicks on the track itself and nothing is currently being dragged.\n    if (\n      !props.isDisabled &&\n      state.values.every((_, i) => !state.isThumbDragging(i))\n    ) {\n      let size = isVertical ? trackLayout.height : trackLayout.width;\n      // Find the closest thumb\n      const trackPosition = trackLayout[isVertical ? 'top' : 'left'];\n      const clickPosition = isVertical ? clientY : clientX;\n      const offset = clickPosition - trackPosition;\n      let percent = offset / size;\n      if (direction === 'rtl' || isVertical) {\n        percent = 1 - percent;\n      }\n      let value = state.getPercentValue(percent);\n\n      // to find the closet thumb we split the array based on the first thumb position to the \"right/end\" of the click.\n      let closestThumb;\n      let split = state.values.findIndex((v) => value - v < 0);\n      if (split === 0) {\n        // If the index is zero then the closetThumb is the first one\n        closestThumb = split;\n      } else if (split === -1) {\n        // If no index is found they've clicked past all the thumbs\n        closestThumb = state.values.length - 1;\n      } else {\n        let lastLeft = state.values[split - 1];\n        let firstRight = state.values[split];\n        // Pick the last left/start thumb, unless they are stacked on top of each other, then pick the right/end one\n        if (Math.abs(lastLeft - value) < Math.abs(firstRight - value)) {\n          closestThumb = split - 1;\n        } else {\n          closestThumb = split;\n        }\n      }\n\n      // Confirm that the found closest thumb is editable, not disabled, and move it\n      if (closestThumb >= 0 && state.isThumbEditable(closestThumb)) {\n        // Don't unfocus anything\n        e.preventDefault();\n\n        realTimeTrackDraggingIndex.current = closestThumb;\n        state.setFocusedThumb(closestThumb);\n        currentPointer.current = id;\n\n        state.setThumbDragging(realTimeTrackDraggingIndex.current, true);\n        state.setThumbValue(closestThumb, value);\n\n        addGlobalListener(window, 'mouseup', onUpTrack, false);\n        addGlobalListener(window, 'touchend', onUpTrack, false);\n        addGlobalListener(window, 'pointerup', onUpTrack, false);\n      } else {\n        realTimeTrackDraggingIndex.current = null;\n      }\n    }\n  };\n\n  let onUpTrack = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (id === currentPointer.current) {\n      if (realTimeTrackDraggingIndex.current != null) {\n        state.setThumbDragging(realTimeTrackDraggingIndex.current, false);\n        realTimeTrackDraggingIndex.current = null;\n      }\n\n      removeGlobalListener(window, 'mouseup', onUpTrack, false);\n      removeGlobalListener(window, 'touchend', onUpTrack, false);\n      removeGlobalListener(window, 'pointerup', onUpTrack, false);\n    }\n  };\n\n  if (labelProps.htmlFor) {\n    // Ideally the `for` attribute should point to the first thumb, but VoiceOver on iOS\n    // causes this to override the `aria-labelledby` on the thumb. This causes the first\n    // thumb to only be announced as the slider label rather than its individual name as well.\n    // See https://bugs.webkit.org/show_bug.cgi?id=172464.\n    delete labelProps.htmlFor;\n    labelProps.onClick = () => {\n      // Safari does not focus <input type=\"range\"> elements when clicking on an associated <label>,\n      // so do it manually. In addition, make sure we show the focus ring.\n      document.getElementById(getSliderThumbId(state, 0))?.focus();\n      setInteractionModality('keyboard');\n    };\n  }\n\n  return {\n    labelProps,\n    // The root element of the Slider will have role=\"group\" to group together\n    // all the thumb inputs in the Slider.  The label of the Slider will\n    // be used to label the group.\n    groupProps: {\n      role: 'group',\n      ...fieldProps,\n    },\n    trackProps: mergeProps(\n      {\n        onMouseDown(e: React.MouseEvent<HTMLElement>) {\n          if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n            return;\n          }\n          onDownTrack(e, undefined, e.clientX, e.clientY);\n        },\n        onPointerDown(e: React.PointerEvent<HTMLElement>) {\n          if (\n            e.pointerType === 'mouse' &&\n            (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)\n          ) {\n            return;\n          }\n          onDownTrack(e, e.pointerId, e.clientX, e.clientY);\n        },\n        onTouchStart(e: React.TouchEvent<HTMLElement>) {\n          onDownTrack(\n            e,\n            e.changedTouches[0].identifier,\n            e.changedTouches[0].clientX,\n            e.changedTouches[0].clientY\n          );\n        },\n      },\n      moveProps\n    ),\n    outputProps: {\n      'htmlFor': state.values\n        .map((_, index) => getSliderThumbId(state, index))\n        .join(' '),\n      'aria-live': 'off',\n    },\n  };\n}\n\nexport const useSlider = (props: any, state: any, ref: any) => {\n  let { groupProps: webGroupProps, ...rest } = useSliderWeb(props, state, ref);\n  let groupProps = mapDomPropsToRN(webGroupProps);\n  let labelProps = mapDomPropsToRN(rest.labelProps);\n  return { groupProps, ...rest, labelProps };\n};\n"]}
+{"version":3,"sources":["useSlider.web.ts"],"names":["useSliderWeb","props","state","trackLayout","isReversed","labelProps","fieldProps","isVertical","orientation","sliderIds","set","id","direction","undefined","addGlobalListener","removeGlobalListener","realTimeTrackDraggingIndex","stateRef","current","reverseX","currentPosition","moveProps","onMoveStart","onMove","deltaX","deltaY","size","height","width","getThumbPercent","delta","percent","setThumbPercent","onMoveEnd","setThumbDragging","currentPointer","onDownTrack","e","clientX","clientY","isDisabled","values","every","_","i","isThumbDragging","trackPosition","clickPosition","offset","value","getPercentValue","closestThumb","split","findIndex","v","length","lastLeft","firstRight","Math","abs","isThumbEditable","preventDefault","setFocusedThumb","setThumbValue","window","onUpTrack","pointerId","changedTouches","identifier","htmlFor","onClick","document","getElementById","focus","groupProps","role","trackProps","onMouseDown","button","altKey","ctrlKey","metaKey","onPointerDown","pointerType","onTouchStart","outputProps","map","index","join","useSlider","ref","webGroupProps","rest"],"mappings":"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","sourcesContent":["import { AriaSliderProps } from '@react-types/slider';\nimport { clamp, mergeProps, useGlobalListeners } from '@react-aria/utils';\nimport { getSliderThumbId, sliderIds } from './utils';\nimport React, { useRef } from 'react';\nimport { setInteractionModality } from '@react-aria/interactions';\nimport { SliderState } from '@react-stately/slider';\nimport { useLabel } from '@react-aria/label';\nimport { mapDomPropsToRN, isRTL } from '@react-native-aria/utils';\nimport { useMove } from './useMove';\n\ninterface SliderAria {\n  /** Props for the label element. */\n  labelProps: any;\n\n  /** Props for the root element of the slider component; groups slider inputs. */\n  groupProps: any;\n\n  /** Props for the track element. */\n  trackProps: any;\n\n  /** Props for the output element, displaying the value of the slider thumbs. */\n  outputProps: any;\n}\n\nfunction useSliderWeb(\n  props: AriaSliderProps,\n  state: SliderState,\n  trackLayout: {\n    height: number;\n    width: number;\n    top: number;\n    left: number;\n    x: number;\n    y: number;\n  },\n  isReversed?: boolean\n): SliderAria {\n  let { labelProps, fieldProps } = useLabel(props);\n\n  let isVertical = props.orientation === 'vertical';\n\n  // Attach id of the label to the state so it can be accessed by useSliderThumb.\n  sliderIds.set(state, labelProps.id ?? fieldProps.id);\n\n  const direction = isRTL() ? 'rtl' : undefined;\n\n  let { addGlobalListener, removeGlobalListener } = useGlobalListeners();\n\n  // When the user clicks or drags the track, we want the motion to set and drag the\n  // closest thumb.  Hence we also need to install useMove() on the track element.\n  // Here, we keep track of which index is the \"closest\" to the drag start point.\n  // It is set onMouseDown/onTouchDown; see trackProps below.\n  const realTimeTrackDraggingIndex = useRef<number | null>(null);\n\n  const stateRef = useRef<SliderState>(null);\n  stateRef.current = state;\n  const reverseX = isReversed || direction === 'rtl';\n\n  const currentPosition = useRef<number>(null);\n  const { moveProps } = useMove({\n    onMoveStart() {\n      currentPosition.current = null;\n    },\n    onMove({ deltaX, deltaY }) {\n      let size = isVertical ? trackLayout.height : trackLayout.width;\n\n      if (currentPosition.current == null) {\n        currentPosition.current =\n          stateRef.current.getThumbPercent(realTimeTrackDraggingIndex.current) *\n          size;\n      }\n\n      let delta = isVertical ? deltaY : deltaX;\n      if (reverseX) {\n        if (!isVertical) {\n          delta = -delta;\n        }\n      } else {\n        if (isVertical) {\n          delta = -delta;\n        }\n      }\n\n      currentPosition.current += delta;\n\n      if (realTimeTrackDraggingIndex.current != null) {\n        const percent = clamp(currentPosition.current / size, 0, 1);\n        stateRef.current.setThumbPercent(\n          realTimeTrackDraggingIndex.current,\n          percent\n        );\n      }\n    },\n    onMoveEnd() {\n      if (realTimeTrackDraggingIndex.current != null) {\n        stateRef.current.setThumbDragging(\n          realTimeTrackDraggingIndex.current,\n          false\n        );\n        realTimeTrackDraggingIndex.current = null;\n      }\n    },\n  });\n\n  let currentPointer = useRef<number | null | undefined>(undefined);\n  let onDownTrack = (\n    e: React.UIEvent,\n    id: number,\n    clientX: number,\n    clientY: number\n  ) => {\n    // We only trigger track-dragging if the user clicks on the track itself and nothing is currently being dragged.\n    if (\n      !props.isDisabled &&\n      state.values.every((_, i) => !state.isThumbDragging(i))\n    ) {\n      let size = isVertical ? trackLayout.height : trackLayout.width;\n      // Find the closest thumb\n      const trackPosition = trackLayout[isVertical ? 'top' : 'left'];\n      const clickPosition = isVertical ? clientY : clientX;\n      const offset = clickPosition - trackPosition;\n      let percent = offset / size;\n      if (reverseX) {\n        if (!isVertical) {\n          percent = 1 - percent;\n        }\n      } else {\n        if (isVertical) {\n          percent = 1 - percent;\n        }\n      }\n      let value = state.getPercentValue(percent);\n\n      // to find the closet thumb we split the array based on the first thumb position to the \"right/end\" of the click.\n      let closestThumb;\n      let split = state.values.findIndex((v) => value - v < 0);\n      if (split === 0) {\n        // If the index is zero then the closetThumb is the first one\n        closestThumb = split;\n      } else if (split === -1) {\n        // If no index is found they've clicked past all the thumbs\n        closestThumb = state.values.length - 1;\n      } else {\n        let lastLeft = state.values[split - 1];\n        let firstRight = state.values[split];\n        // Pick the last left/start thumb, unless they are stacked on top of each other, then pick the right/end one\n        if (Math.abs(lastLeft - value) < Math.abs(firstRight - value)) {\n          closestThumb = split - 1;\n        } else {\n          closestThumb = split;\n        }\n      }\n\n      // Confirm that the found closest thumb is editable, not disabled, and move it\n      if (closestThumb >= 0 && state.isThumbEditable(closestThumb)) {\n        // Don't unfocus anything\n        e.preventDefault();\n\n        realTimeTrackDraggingIndex.current = closestThumb;\n        state.setFocusedThumb(closestThumb);\n        currentPointer.current = id;\n\n        state.setThumbDragging(realTimeTrackDraggingIndex.current, true);\n        state.setThumbValue(closestThumb, value);\n\n        addGlobalListener(window, 'mouseup', onUpTrack, false);\n        addGlobalListener(window, 'touchend', onUpTrack, false);\n        addGlobalListener(window, 'pointerup', onUpTrack, false);\n      } else {\n        realTimeTrackDraggingIndex.current = null;\n      }\n    }\n  };\n\n  let onUpTrack = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (id === currentPointer.current) {\n      if (realTimeTrackDraggingIndex.current != null) {\n        state.setThumbDragging(realTimeTrackDraggingIndex.current, false);\n        realTimeTrackDraggingIndex.current = null;\n      }\n\n      removeGlobalListener(window, 'mouseup', onUpTrack, false);\n      removeGlobalListener(window, 'touchend', onUpTrack, false);\n      removeGlobalListener(window, 'pointerup', onUpTrack, false);\n    }\n  };\n\n  if (labelProps.htmlFor) {\n    // Ideally the `for` attribute should point to the first thumb, but VoiceOver on iOS\n    // causes this to override the `aria-labelledby` on the thumb. This causes the first\n    // thumb to only be announced as the slider label rather than its individual name as well.\n    // See https://bugs.webkit.org/show_bug.cgi?id=172464.\n    delete labelProps.htmlFor;\n    labelProps.onClick = () => {\n      // Safari does not focus <input type=\"range\"> elements when clicking on an associated <label>,\n      // so do it manually. In addition, make sure we show the focus ring.\n      document.getElementById(getSliderThumbId(state, 0))?.focus();\n      setInteractionModality('keyboard');\n    };\n  }\n\n  return {\n    labelProps,\n    // The root element of the Slider will have role=\"group\" to group together\n    // all the thumb inputs in the Slider.  The label of the Slider will\n    // be used to label the group.\n    groupProps: {\n      role: 'group',\n      ...fieldProps,\n    },\n    trackProps: mergeProps(\n      {\n        onMouseDown(e: React.MouseEvent<HTMLElement>) {\n          if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n            return;\n          }\n          onDownTrack(e, undefined, e.clientX, e.clientY);\n        },\n        onPointerDown(e: React.PointerEvent<HTMLElement>) {\n          if (\n            e.pointerType === 'mouse' &&\n            (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)\n          ) {\n            return;\n          }\n          onDownTrack(e, e.pointerId, e.clientX, e.clientY);\n        },\n        onTouchStart(e: React.TouchEvent<HTMLElement>) {\n          onDownTrack(\n            e,\n            e.changedTouches[0].identifier,\n            e.changedTouches[0].clientX,\n            e.changedTouches[0].clientY\n          );\n        },\n      },\n      moveProps\n    ),\n    outputProps: {\n      'htmlFor': state.values\n        .map((_, index) => getSliderThumbId(state, index))\n        .join(' '),\n      'aria-live': 'off',\n    },\n  };\n}\n\nexport const useSlider = (\n  props: any,\n  state: any,\n  ref: any,\n  isReversed?: boolean\n) => {\n  let { groupProps: webGroupProps, ...rest } = useSliderWeb(\n    props,\n    state,\n    ref,\n    isReversed\n  );\n  let groupProps = mapDomPropsToRN(webGroupProps);\n  let labelProps = mapDomPropsToRN(rest.labelProps);\n  return { groupProps, ...rest, labelProps };\n};\n"]}

package/lib/commonjs/useSliderThumb.js

@@ -23,7 +23,7 @@ var _utils3 = require("@react-native-aria/utils");
  * @param opts Options for this Slider thumb.
  * @param state Slider state, created via `useSliderState`.
  */
-function useSliderThumb(opts, state) {
+function useSliderThumb(opts, state, isReversed) {
   var _opts$ariaLabelledby;
 
   let {
@@ -45,7 +45,7 @@ function useSliderThumb(opts, state) {
   });
   const stateRef = (0, _react.useRef)(null);
   stateRef.current = state;
-  let reverseX = direction === 'rtl';
+  let reverseX = isReversed || direction === 'rtl';
   let currentPosition = (0, _react.useRef)(null);
   let {
     moveProps
@@ -67,8 +67,14 @@ function useSliderThumb(opts, state) {
 
       let delta = isVertical ? deltaY : deltaX;
 
-      if (isVertical || reverseX) {
-        delta = -delta;
+      if (reverseX) {
+        if (!isVertical) {
+          delta = -delta;
+        }
+      } else {
+        if (isVertical) {
+          delta = -delta;
+        }
       }
 
       currentPosition.current += delta;

package/lib/commonjs/useSliderThumb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSliderThumb.ts"],"names":["useSliderThumb","opts","state","index","isDisabled","trackLayout","isVertical","orientation","direction","undefined","labelId","sliderIds","get","labelProps","fieldProps","trim","stateRef","current","reverseX","currentPosition","moveProps","onMoveStart","setThumbDragging","onMove","deltaX","deltaY","size","height","width","getThumbPercent","delta","setThumbPercent","onMoveEnd","setThumbEditable","onAccessibilityAction","event","max","getThumbMinValue","min","getThumbMaxValue","value","getThumbValue","incrementValue","Math","step","decrementValue","nativeEvent","actionName","setThumbValue","inputProps","disabled","accessibilityRole","accessibilityValue","now","accessibilityActions","name","label","thumbProps"],"mappings":"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","sourcesContent":["import { AriaSliderThumbProps } from '@react-types/slider';\nimport { clamp } from '@react-aria/utils';\nimport { getSliderThumbId, sliderIds } from './utils';\nimport { useRef } from 'react';\nimport { SliderState } from '@react-stately/slider';\nimport { useLabel } from '@react-aria/label';\nimport { useMove } from './useMove';\nimport { isRTL } from '@react-native-aria/utils';\n\ninterface SliderThumbAria {\n  /** Props for the root thumb element; handles the dragging motion. */\n  thumbProps: any;\n\n  /** Props for the visually hidden range input element. */\n  inputProps: any;\n\n  /** Props for the label element for this thumb (optional). */\n  labelProps: any;\n}\n\ninterface SliderThumbOptions extends AriaSliderThumbProps {\n  /** A ref to the track element. */\n  trackLayout: any;\n  /** A ref to the thumb input element. */\n  inputRef: any;\n}\n\n/**\n * Provides behavior and accessibility for a thumb of a slider component.\n *\n * @param opts Options for this Slider thumb.\n * @param state Slider state, created via `useSliderState`.\n */\nexport function useSliderThumb(\n  opts: SliderThumbOptions,\n  state: SliderState\n): SliderThumbAria {\n  let { index, isDisabled, trackLayout } = opts;\n\n  let isVertical = opts.orientation === 'vertical';\n  const direction = isRTL() ? 'rtl' : undefined;\n\n  let labelId = sliderIds.get(state);\n  const { labelProps, fieldProps } = useLabel({\n    ...opts,\n    'id': getSliderThumbId(state, index),\n    'aria-labelledby': `${labelId} ${opts['aria-labelledby'] ?? ''}`.trim(),\n  });\n\n  const stateRef = useRef<SliderState>(null);\n  stateRef.current = state;\n  let reverseX = direction === 'rtl';\n  let currentPosition = useRef<number>(null);\n  let { moveProps } = useMove({\n    onMoveStart() {\n      currentPosition.current = null;\n      state.setThumbDragging(index, true);\n    },\n    onMove({ deltaX, deltaY }) {\n      let size = isVertical ? trackLayout.height : trackLayout.width;\n\n      if (currentPosition.current == null) {\n        currentPosition.current =\n          stateRef.current.getThumbPercent(index) * size;\n      }\n\n      let delta = isVertical ? deltaY : deltaX;\n      if (isVertical || reverseX) {\n        delta = -delta;\n      }\n      currentPosition.current += delta;\n      stateRef.current.setThumbPercent(\n        index,\n        clamp(currentPosition.current / size, 0, 1)\n      );\n    },\n    onMoveEnd() {\n      state.setThumbDragging(index, false);\n    },\n  });\n\n  state.setThumbEditable(index, !isDisabled);\n\n  const onAccessibilityAction = (event: any) => {\n    const max = state.getThumbMinValue(index);\n    const min = state.getThumbMaxValue(index);\n    const value = state.getThumbValue(index);\n\n    const incrementValue = Math.min(value + state.step ?? 1, max);\n    const decrementValue = Math.max(value - state.step ?? 1, min);\n\n    switch (event.nativeEvent.actionName) {\n      case 'increment':\n        state.setThumbValue(index, incrementValue);\n        break;\n      case 'decrement':\n        state.setThumbValue(index, decrementValue);\n        break;\n      default:\n        break;\n    }\n  };\n\n  return {\n    inputProps: {\n      ...fieldProps,\n      disabled: isDisabled,\n      accessibilityRole: 'adjustable',\n      accessibilityValue: {\n        min: state.getThumbMinValue(index),\n        max: state.getThumbMaxValue(index),\n        now: state.getThumbValue(index),\n      },\n      accessibilityActions: [\n        {\n          name: 'increment',\n          label: 'Increment',\n        },\n        {\n          name: 'decrement',\n          label: 'Decrement',\n        },\n      ],\n      onAccessibilityAction,\n    },\n    thumbProps: !isDisabled ? moveProps : {},\n    labelProps,\n  };\n}\n"]}
+{"version":3,"sources":["useSliderThumb.ts"],"names":["useSliderThumb","opts","state","isReversed","index","isDisabled","trackLayout","isVertical","orientation","direction","undefined","labelId","sliderIds","get","labelProps","fieldProps","trim","stateRef","current","reverseX","currentPosition","moveProps","onMoveStart","setThumbDragging","onMove","deltaX","deltaY","size","height","width","getThumbPercent","delta","setThumbPercent","onMoveEnd","setThumbEditable","onAccessibilityAction","event","max","getThumbMinValue","min","getThumbMaxValue","value","getThumbValue","incrementValue","Math","step","decrementValue","nativeEvent","actionName","setThumbValue","inputProps","disabled","accessibilityRole","accessibilityValue","now","accessibilityActions","name","label","thumbProps"],"mappings":"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","sourcesContent":["import { AriaSliderThumbProps } from '@react-types/slider';\nimport { clamp } from '@react-aria/utils';\nimport { getSliderThumbId, sliderIds } from './utils';\nimport { useRef } from 'react';\nimport { SliderState } from '@react-stately/slider';\nimport { useLabel } from '@react-aria/label';\nimport { useMove } from './useMove';\nimport { isRTL } from '@react-native-aria/utils';\n\ninterface SliderThumbAria {\n  /** Props for the root thumb element; handles the dragging motion. */\n  thumbProps: any;\n\n  /** Props for the visually hidden range input element. */\n  inputProps: any;\n\n  /** Props for the label element for this thumb (optional). */\n  labelProps: any;\n}\n\ninterface SliderThumbOptions extends AriaSliderThumbProps {\n  /** A ref to the track element. */\n  trackLayout: any;\n  /** A ref to the thumb input element. */\n  inputRef: any;\n}\n\n/**\n * Provides behavior and accessibility for a thumb of a slider component.\n *\n * @param opts Options for this Slider thumb.\n * @param state Slider state, created via `useSliderState`.\n */\nexport function useSliderThumb(\n  opts: SliderThumbOptions,\n  state: SliderState,\n  isReversed?: boolean\n): SliderThumbAria {\n  let { index, isDisabled, trackLayout } = opts;\n\n  let isVertical = opts.orientation === 'vertical';\n  const direction = isRTL() ? 'rtl' : undefined;\n\n  let labelId = sliderIds.get(state);\n  const { labelProps, fieldProps } = useLabel({\n    ...opts,\n    'id': getSliderThumbId(state, index),\n    'aria-labelledby': `${labelId} ${opts['aria-labelledby'] ?? ''}`.trim(),\n  });\n\n  const stateRef = useRef<SliderState>(null);\n  stateRef.current = state;\n  let reverseX = isReversed || direction === 'rtl';\n  let currentPosition = useRef<number>(null);\n  let { moveProps } = useMove({\n    onMoveStart() {\n      currentPosition.current = null;\n      state.setThumbDragging(index, true);\n    },\n    onMove({ deltaX, deltaY }) {\n      let size = isVertical ? trackLayout.height : trackLayout.width;\n\n      if (currentPosition.current == null) {\n        currentPosition.current =\n          stateRef.current.getThumbPercent(index) * size;\n      }\n\n      let delta = isVertical ? deltaY : deltaX;\n      if (reverseX) {\n        if (!isVertical) {\n          delta = -delta;\n        }\n      } else {\n        if (isVertical) {\n          delta = -delta;\n        }\n      }\n      currentPosition.current += delta;\n      stateRef.current.setThumbPercent(\n        index,\n        clamp(currentPosition.current / size, 0, 1)\n      );\n    },\n    onMoveEnd() {\n      state.setThumbDragging(index, false);\n    },\n  });\n\n  state.setThumbEditable(index, !isDisabled);\n\n  const onAccessibilityAction = (event: any) => {\n    const max = state.getThumbMinValue(index);\n    const min = state.getThumbMaxValue(index);\n    const value = state.getThumbValue(index);\n\n    const incrementValue = Math.min(value + state.step ?? 1, max);\n    const decrementValue = Math.max(value - state.step ?? 1, min);\n\n    switch (event.nativeEvent.actionName) {\n      case 'increment':\n        state.setThumbValue(index, incrementValue);\n        break;\n      case 'decrement':\n        state.setThumbValue(index, decrementValue);\n        break;\n      default:\n        break;\n    }\n  };\n\n  return {\n    inputProps: {\n      ...fieldProps,\n      disabled: isDisabled,\n      accessibilityRole: 'adjustable',\n      accessibilityValue: {\n        min: state.getThumbMinValue(index),\n        max: state.getThumbMaxValue(index),\n        now: state.getThumbValue(index),\n      },\n      accessibilityActions: [\n        {\n          name: 'increment',\n          label: 'Increment',\n        },\n        {\n          name: 'decrement',\n          label: 'Decrement',\n        },\n      ],\n      onAccessibilityAction,\n    },\n    thumbProps: !isDisabled ? moveProps : {},\n    labelProps,\n  };\n}\n"]}

package/lib/commonjs/useSliderThumb.web.js

@@ -25,7 +25,7 @@ var _utils3 = require("@react-native-aria/utils");
  * @param opts Options for this Slider thumb.
  * @param state Slider state, created via `useSliderState`.
  */
-function useSliderThumb(opts, state) {
+function useSliderThumb(opts, state, isReversed) {
   var _opts$ariaLabelledby;
 
   let {
@@ -66,7 +66,7 @@ function useSliderThumb(opts, state) {
   }, [isFocused, focusInput]);
   const stateRef = (0, _react.useRef)(null);
   stateRef.current = state;
-  let reverseX = direction === 'rtl';
+  let reverseX = isReversed || direction === 'rtl';
   let currentPosition = (0, _react.useRef)(null);
   let {
     moveProps
@@ -89,14 +89,20 @@ function useSliderThumb(opts, state) {
 
       if (pointerType === 'keyboard') {
         // (invert left/right according to language direction) + (according to vertical)
-        let delta = ((reverseX ? -deltaX : deltaX) + (isVertical ? -deltaY : -deltaY)) * stateRef.current.step;
+        let delta = ((reverseX ? -deltaX : deltaX) + (reverseX ? deltaY : -deltaY)) * stateRef.current.step;
         currentPosition.current += delta * size;
         stateRef.current.setThumbValue(index, stateRef.current.getThumbValue(index) + delta);
       } else {
         let delta = isVertical ? deltaY : deltaX;
 
-        if (isVertical || reverseX) {
-          delta = -delta;
+        if (reverseX) {
+          if (!isVertical) {
+            delta = -delta;
+          }
+        } else {
+          if (isVertical) {
+            delta = -delta;
+          }
         }
 
         currentPosition.current += delta;

package/lib/commonjs/useSliderThumb.web.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSliderThumb.web.ts"],"names":["useSliderThumb","opts","state","index","isRequired","isDisabled","validationState","trackLayout","inputRef","isVertical","orientation","direction","undefined","addGlobalListener","removeGlobalListener","labelId","sliderIds","get","labelProps","fieldProps","trim","value","values","focusInput","current","isFocused","focusedThumb","stateRef","reverseX","currentPosition","moveProps","onMoveStart","setThumbDragging","onMove","deltaX","deltaY","pointerType","size","height","width","getThumbPercent","delta","step","setThumbValue","getThumbValue","setThumbPercent","onMoveEnd","setThumbEditable","focusableProps","onFocus","setFocusedThumb","onBlur","currentPointer","onDown","id","window","onUp","e","pointerId","changedTouches","identifier","inputProps","getThumbMinValue","getThumbMaxValue","getThumbValueLabel","parseFloat","target","thumbProps","onMouseDown","button","altKey","ctrlKey","metaKey","onPointerDown","onTouchStart"],"mappings":"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","sourcesContent":["import { AriaSliderThumbProps } from '@react-types/slider';\nimport {\n  clamp,\n  focusWithoutScrolling,\n  mergeProps,\n  useGlobalListeners,\n} from '@react-aria/utils';\nimport { getSliderThumbId, sliderIds } from './utils';\nimport React, {\n  ChangeEvent,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  LabelHTMLAttributes,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\nimport { SliderState } from '@react-stately/slider';\nimport { useFocusable } from '@react-aria/focus';\nimport { useLabel } from '@react-aria/label';\nimport { useMove } from './useMove';\nimport { isRTL } from '@react-native-aria/utils';\n\ninterface SliderThumbAria {\n  /** Props for the root thumb element; handles the dragging motion. */\n  thumbProps: HTMLAttributes<HTMLElement>;\n\n  /** Props for the visually hidden range input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>;\n\n  /** Props for the label element for this thumb (optional). */\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>;\n}\n\ninterface SliderThumbOptions extends AriaSliderThumbProps {\n  /** A ref to the track element. */\n  trackLayout: any;\n  /** A ref to the thumb input element. */\n  inputRef: RefObject<HTMLInputElement>;\n}\n\n/**\n * Provides behavior and accessibility for a thumb of a slider component.\n *\n * @param opts Options for this Slider thumb.\n * @param state Slider state, created via `useSliderState`.\n */\nexport function useSliderThumb(\n  opts: SliderThumbOptions,\n  state: SliderState\n): SliderThumbAria {\n  let {\n    index,\n    isRequired,\n    isDisabled,\n    validationState,\n    trackLayout,\n    inputRef,\n  } = opts;\n\n  let isVertical = opts.orientation === 'vertical';\n\n  let direction = isRTL() ? 'rtl' : undefined;\n  let { addGlobalListener, removeGlobalListener } = useGlobalListeners();\n\n  let labelId = sliderIds.get(state);\n  const { labelProps, fieldProps } = useLabel({\n    ...opts,\n    'id': getSliderThumbId(state, index),\n    'aria-labelledby': `${labelId} ${opts['aria-labelledby'] ?? ''}`.trim(),\n  });\n\n  const value = state.values[index];\n\n  const focusInput = useCallback(() => {\n    if (inputRef.current) {\n      focusWithoutScrolling(inputRef.current);\n    }\n  }, [inputRef]);\n\n  const isFocused = state.focusedThumb === index;\n\n  useEffect(() => {\n    if (isFocused) {\n      focusInput();\n    }\n  }, [isFocused, focusInput]);\n\n  const stateRef = useRef<SliderState>(null);\n  stateRef.current = state;\n  let reverseX = direction === 'rtl';\n  let currentPosition = useRef<number>(null);\n  let { moveProps } = useMove({\n    onMoveStart() {\n      currentPosition.current = null;\n      state.setThumbDragging(index, true);\n    },\n    onMove({ deltaX, deltaY, pointerType }) {\n      let size = isVertical ? trackLayout.height : trackLayout.width;\n\n      if (currentPosition.current == null) {\n        currentPosition.current =\n          stateRef.current.getThumbPercent(index) * size;\n      }\n      if (pointerType === 'keyboard') {\n        // (invert left/right according to language direction) + (according to vertical)\n        let delta =\n          ((reverseX ? -deltaX : deltaX) + (isVertical ? -deltaY : -deltaY)) *\n          stateRef.current.step;\n        currentPosition.current += delta * size;\n        stateRef.current.setThumbValue(\n          index,\n          stateRef.current.getThumbValue(index) + delta\n        );\n      } else {\n        let delta = isVertical ? deltaY : deltaX;\n        if (isVertical || reverseX) {\n          delta = -delta;\n        }\n        currentPosition.current += delta;\n        stateRef.current.setThumbPercent(\n          index,\n          clamp(currentPosition.current / size, 0, 1)\n        );\n      }\n    },\n    onMoveEnd() {\n      state.setThumbDragging(index, false);\n    },\n  });\n\n  // Immediately register editability with the state\n  state.setThumbEditable(index, !isDisabled);\n\n  const { focusableProps } = useFocusable(\n    mergeProps(opts, {\n      onFocus: () => state.setFocusedThumb(index),\n      onBlur: () => state.setFocusedThumb(undefined),\n    }),\n    inputRef\n  );\n\n  let currentPointer = useRef<number | undefined>(undefined);\n  let onDown = (id?: number) => {\n    focusInput();\n    currentPointer.current = id;\n    state.setThumbDragging(index, true);\n\n    addGlobalListener(window, 'mouseup', onUp, false);\n    addGlobalListener(window, 'touchend', onUp, false);\n    addGlobalListener(window, 'pointerup', onUp, false);\n  };\n\n  let onUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (id === currentPointer.current) {\n      focusInput();\n      state.setThumbDragging(index, false);\n      removeGlobalListener(window, 'mouseup', onUp, false);\n      removeGlobalListener(window, 'touchend', onUp, false);\n      removeGlobalListener(window, 'pointerup', onUp, false);\n    }\n  };\n\n  // We install mouse handlers for the drag motion on the thumb div, but\n  // not the key handler for moving the thumb with the slider.  Instead,\n  // we focus the range input, and let the browser handle the keyboard\n  // interactions; we then listen to input's onChange to update state.\n  return {\n    inputProps: mergeProps(focusableProps, fieldProps, {\n      'type': 'range',\n      'tabIndex': !isDisabled ? 0 : undefined,\n      'min': state.getThumbMinValue(index),\n      'max': state.getThumbMaxValue(index),\n      'step': state.step,\n      'value': value,\n      'disabled': isDisabled,\n      'aria-orientation': opts.orientation,\n      'aria-valuetext': state.getThumbValueLabel(index),\n      'aria-required': isRequired || undefined,\n      'aria-invalid': validationState === 'invalid' || undefined,\n      'aria-errormessage': opts['aria-errormessage'],\n      'onChange': (e: ChangeEvent<HTMLInputElement>) => {\n        state.setThumbValue(index, parseFloat(e.target.value));\n      },\n    }),\n    thumbProps: !isDisabled\n      ? mergeProps(moveProps, {\n          onMouseDown: (e: React.MouseEvent<HTMLElement>) => {\n            if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n              return;\n            }\n            onDown();\n          },\n          onPointerDown: (e: React.PointerEvent<HTMLElement>) => {\n            if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n              return;\n            }\n            onDown(e.pointerId);\n          },\n          onTouchStart: (e: React.TouchEvent<HTMLElement>) => {\n            onDown(e.changedTouches[0].identifier);\n          },\n        })\n      : {},\n    labelProps,\n  };\n}\n"]}
+{"version":3,"sources":["useSliderThumb.web.ts"],"names":["useSliderThumb","opts","state","isReversed","index","isRequired","isDisabled","validationState","trackLayout","inputRef","isVertical","orientation","direction","undefined","addGlobalListener","removeGlobalListener","labelId","sliderIds","get","labelProps","fieldProps","trim","value","values","focusInput","current","isFocused","focusedThumb","stateRef","reverseX","currentPosition","moveProps","onMoveStart","setThumbDragging","onMove","deltaX","deltaY","pointerType","size","height","width","getThumbPercent","delta","step","setThumbValue","getThumbValue","setThumbPercent","onMoveEnd","setThumbEditable","focusableProps","onFocus","setFocusedThumb","onBlur","currentPointer","onDown","id","window","onUp","e","pointerId","changedTouches","identifier","inputProps","getThumbMinValue","getThumbMaxValue","getThumbValueLabel","parseFloat","target","thumbProps","onMouseDown","button","altKey","ctrlKey","metaKey","onPointerDown","onTouchStart"],"mappings":"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","sourcesContent":["import { AriaSliderThumbProps } from '@react-types/slider';\nimport {\n  clamp,\n  focusWithoutScrolling,\n  mergeProps,\n  useGlobalListeners,\n} from '@react-aria/utils';\nimport { getSliderThumbId, sliderIds } from './utils';\nimport React, {\n  ChangeEvent,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  LabelHTMLAttributes,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\nimport { SliderState } from '@react-stately/slider';\nimport { useFocusable } from '@react-aria/focus';\nimport { useLabel } from '@react-aria/label';\nimport { useMove } from './useMove';\nimport { isRTL } from '@react-native-aria/utils';\n\ninterface SliderThumbAria {\n  /** Props for the root thumb element; handles the dragging motion. */\n  thumbProps: HTMLAttributes<HTMLElement>;\n\n  /** Props for the visually hidden range input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>;\n\n  /** Props for the label element for this thumb (optional). */\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>;\n}\n\ninterface SliderThumbOptions extends AriaSliderThumbProps {\n  /** A ref to the track element. */\n  trackLayout: any;\n  /** A ref to the thumb input element. */\n  inputRef: RefObject<HTMLInputElement>;\n}\n\n/**\n * Provides behavior and accessibility for a thumb of a slider component.\n *\n * @param opts Options for this Slider thumb.\n * @param state Slider state, created via `useSliderState`.\n */\nexport function useSliderThumb(\n  opts: SliderThumbOptions,\n  state: SliderState,\n  isReversed?: boolean\n): SliderThumbAria {\n  let {\n    index,\n    isRequired,\n    isDisabled,\n    validationState,\n    trackLayout,\n    inputRef,\n  } = opts;\n\n  let isVertical = opts.orientation === 'vertical';\n\n  let direction = isRTL() ? 'rtl' : undefined;\n  let { addGlobalListener, removeGlobalListener } = useGlobalListeners();\n\n  let labelId = sliderIds.get(state);\n  const { labelProps, fieldProps } = useLabel({\n    ...opts,\n    'id': getSliderThumbId(state, index),\n    'aria-labelledby': `${labelId} ${opts['aria-labelledby'] ?? ''}`.trim(),\n  });\n\n  const value = state.values[index];\n\n  const focusInput = useCallback(() => {\n    if (inputRef.current) {\n      focusWithoutScrolling(inputRef.current);\n    }\n  }, [inputRef]);\n\n  const isFocused = state.focusedThumb === index;\n\n  useEffect(() => {\n    if (isFocused) {\n      focusInput();\n    }\n  }, [isFocused, focusInput]);\n\n  const stateRef = useRef<SliderState>(null);\n  stateRef.current = state;\n  let reverseX = isReversed || direction === 'rtl';\n  let currentPosition = useRef<number>(null);\n  let { moveProps } = useMove({\n    onMoveStart() {\n      currentPosition.current = null;\n      state.setThumbDragging(index, true);\n    },\n    onMove({ deltaX, deltaY, pointerType }) {\n      let size = isVertical ? trackLayout.height : trackLayout.width;\n\n      if (currentPosition.current == null) {\n        currentPosition.current =\n          stateRef.current.getThumbPercent(index) * size;\n      }\n      if (pointerType === 'keyboard') {\n        // (invert left/right according to language direction) + (according to vertical)\n        let delta =\n          ((reverseX ? -deltaX : deltaX) + (reverseX ? deltaY : -deltaY)) *\n          stateRef.current.step;\n        currentPosition.current += delta * size;\n        stateRef.current.setThumbValue(\n          index,\n          stateRef.current.getThumbValue(index) + delta\n        );\n      } else {\n        let delta = isVertical ? deltaY : deltaX;\n        if (reverseX) {\n          if (!isVertical) {\n            delta = -delta;\n          }\n        } else {\n          if (isVertical) {\n            delta = -delta;\n          }\n        }\n        currentPosition.current += delta;\n        stateRef.current.setThumbPercent(\n          index,\n          clamp(currentPosition.current / size, 0, 1)\n        );\n      }\n    },\n    onMoveEnd() {\n      state.setThumbDragging(index, false);\n    },\n  });\n\n  // Immediately register editability with the state\n  state.setThumbEditable(index, !isDisabled);\n\n  const { focusableProps } = useFocusable(\n    mergeProps(opts, {\n      onFocus: () => state.setFocusedThumb(index),\n      onBlur: () => state.setFocusedThumb(undefined),\n    }),\n    inputRef\n  );\n\n  let currentPointer = useRef<number | undefined>(undefined);\n  let onDown = (id?: number) => {\n    focusInput();\n    currentPointer.current = id;\n    state.setThumbDragging(index, true);\n\n    addGlobalListener(window, 'mouseup', onUp, false);\n    addGlobalListener(window, 'touchend', onUp, false);\n    addGlobalListener(window, 'pointerup', onUp, false);\n  };\n\n  let onUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (id === currentPointer.current) {\n      focusInput();\n      state.setThumbDragging(index, false);\n      removeGlobalListener(window, 'mouseup', onUp, false);\n      removeGlobalListener(window, 'touchend', onUp, false);\n      removeGlobalListener(window, 'pointerup', onUp, false);\n    }\n  };\n\n  // We install mouse handlers for the drag motion on the thumb div, but\n  // not the key handler for moving the thumb with the slider.  Instead,\n  // we focus the range input, and let the browser handle the keyboard\n  // interactions; we then listen to input's onChange to update state.\n  return {\n    inputProps: mergeProps(focusableProps, fieldProps, {\n      'type': 'range',\n      'tabIndex': !isDisabled ? 0 : undefined,\n      'min': state.getThumbMinValue(index),\n      'max': state.getThumbMaxValue(index),\n      'step': state.step,\n      'value': value,\n      'disabled': isDisabled,\n      'aria-orientation': opts.orientation,\n      'aria-valuetext': state.getThumbValueLabel(index),\n      'aria-required': isRequired || undefined,\n      'aria-invalid': validationState === 'invalid' || undefined,\n      'aria-errormessage': opts['aria-errormessage'],\n      'onChange': (e: ChangeEvent<HTMLInputElement>) => {\n        state.setThumbValue(index, parseFloat(e.target.value));\n      },\n    }),\n    thumbProps: !isDisabled\n      ? mergeProps(moveProps, {\n          onMouseDown: (e: React.MouseEvent<HTMLElement>) => {\n            if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n              return;\n            }\n            onDown();\n          },\n          onPointerDown: (e: React.PointerEvent<HTMLElement>) => {\n            if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n              return;\n            }\n            onDown(e.pointerId);\n          },\n          onTouchStart: (e: React.TouchEvent<HTMLElement>) => {\n            onDown(e.changedTouches[0].identifier);\n          },\n        })\n      : {},\n    labelProps,\n  };\n}\n"]}

package/lib/module/useSlider.js

@@ -13,7 +13,7 @@ import { isRTL } from '@react-native-aria/utils';
  * accepts click and drag motions, so that the closest thumb will follow clicks and drags on
  * the track.
  */
-export function useSlider(props, state, trackLayout) {
+export function useSlider(props, state, trackLayout, isReversed) {
   var _labelProps$id;
 
   let {
@@ -26,6 +26,7 @@ export function useSlider(props, state, trackLayout) {
 
   let onDownTrack = (e, id, clientX, clientY) => {
     const direction = isRTL() ? 'rtl' : undefined;
+    const reverseX = isReversed || direction === 'rtl';
 
     if (!props.isDisabled && state.values.every((_, i) => !state.isThumbDragging(i))) {
       let size = isVertical ? trackLayout.height : trackLayout.width; // Find the closest thumb
@@ -35,8 +36,14 @@ export function useSlider(props, state, trackLayout) {
       const offset = clickPosition - trackPosition;
       let percent = offset / size;
 
-      if (direction === 'rtl' || isVertical) {
-        percent = 1 - percent;
+      if (reverseX) {
+        if (!isVertical) {
+          percent = 1 - percent;
+        }
+      } else {
+        if (isVertical) {
+          percent = 1 - percent;
+        }
       }
 
       let value = state.getPercentValue(percent); // to find the closet thumb we split the array based on the first thumb position to the "right/end" of the click.

package/lib/module/useSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSlider.ts"],"names":["sliderIds","useRef","useLabel","isRTL","useSlider","props","state","trackLayout","labelProps","fieldProps","isVertical","orientation","set","id","currentPointer","undefined","onDownTrack","e","clientX","clientY","direction","isDisabled","values","every","_","i","isThumbDragging","size","height","width","trackPosition","clickPosition","offset","percent","value","getPercentValue","closestThumb","split","findIndex","v","length","lastLeft","firstRight","Math","abs","isThumbEditable","preventDefault","setFocusedThumb","current","setThumbDragging","setThumbValue","groupProps","trackProps","onPress","locationX","locationY","nativeEvent","outputProps"],"mappings":"AAAA,SAASA,SAAT,QAA0B,SAA1B;AAEA,SAAgBC,MAAhB,QAA8B,OAA9B;AAEA,SAASC,QAAT,QAAyB,mBAAzB;AACA,SAASC,KAAT,QAAsB,0BAAtB;;AAgBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,SAAT,CACLC,KADK,EAELC,KAFK,EAGLC,WAHK,EAIO;AAAA;;AACZ,MAAI;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,MAA6BP,QAAQ,CAACG,KAAD,CAAzC;AAEA,MAAIK,UAAU,GAAGL,KAAK,CAACM,WAAN,KAAsB,UAAvC;AAEAX,EAAAA,SAAS,CAACY,GAAV,CAAcN,KAAd,oBAAqBE,UAAU,CAACK,EAAhC,2DAAsCJ,UAAU,CAACI,EAAjD;AACA,MAAIC,cAAc,GAAGb,MAAM,CAA4Bc,SAA5B,CAA3B;;AAEA,MAAIC,WAAW,GAAG,CAChBC,CADgB,EAEhBJ,EAFgB,EAGhBK,OAHgB,EAIhBC,OAJgB,KAKb;AACH,UAAMC,SAAS,GAAGjB,KAAK,KAAK,KAAL,GAAaY,SAApC;;AACA,QACE,CAACV,KAAK,CAACgB,UAAP,IACAf,KAAK,CAACgB,MAAN,CAAaC,KAAb,CAAmB,CAACC,CAAD,EAAIC,CAAJ,KAAU,CAACnB,KAAK,CAACoB,eAAN,CAAsBD,CAAtB,CAA9B,CAFF,EAGE;AACA,UAAIE,IAAI,GAAGjB,UAAU,GAAGH,WAAW,CAACqB,MAAf,GAAwBrB,WAAW,CAACsB,KAAzD,CADA,CAEA;;AACA,YAAMC,aAAa,GAAGvB,WAAW,CAACG,UAAU,GAAG,GAAH,GAAS,GAApB,CAAjC;AACA,YAAMqB,aAAa,GAAGrB,UAAU,GAAGS,OAAH,GAAaD,OAA7C;AACA,YAAMc,MAAM,GAAGD,aAAa,GAAGD,aAA/B;AACA,UAAIG,OAAO,GAAGD,MAAM,GAAGL,IAAvB;;AACA,UAAIP,SAAS,KAAK,KAAd,IAAuBV,UAA3B,EAAuC;AACrCuB,QAAAA,OAAO,GAAG,IAAIA,OAAd;AACD;;AACD,UAAIC,KAAK,GAAG5B,KAAK,CAAC6B,eAAN,CAAsBF,OAAtB,CAAZ,CAVA,CAWA;;AACA,UAAIG,YAAJ;AACA,UAAIC,KAAK,GAAG/B,KAAK,CAACgB,MAAN,CAAagB,SAAb,CAAwBC,CAAD,IAAOL,KAAK,GAAGK,CAAR,GAAY,CAA1C,CAAZ;;AACA,UAAIF,KAAK,KAAK,CAAd,EAAiB;AACf;AACAD,QAAAA,YAAY,GAAGC,KAAf;AACD,OAHD,MAGO,IAAIA,KAAK,KAAK,CAAC,CAAf,EAAkB;AACvB;AACAD,QAAAA,YAAY,GAAG9B,KAAK,CAACgB,MAAN,CAAakB,MAAb,GAAsB,CAArC;AACD,OAHM,MAGA;AACL,YAAIC,QAAQ,GAAGnC,KAAK,CAACgB,MAAN,CAAae,KAAK,GAAG,CAArB,CAAf;AACA,YAAIK,UAAU,GAAGpC,KAAK,CAACgB,MAAN,CAAae,KAAb,CAAjB,CAFK,CAGL;;AACA,YAAIM,IAAI,CAACC,GAAL,CAASH,QAAQ,GAAGP,KAApB,IAA6BS,IAAI,CAACC,GAAL,CAASF,UAAU,GAAGR,KAAtB,CAAjC,EAA+D;AAC7DE,UAAAA,YAAY,GAAGC,KAAK,GAAG,CAAvB;AACD,SAFD,MAEO;AACLD,UAAAA,YAAY,GAAGC,KAAf;AACD;AACF,OA7BD,CA8BA;;;AACA,UAAID,YAAY,IAAI,CAAhB,IAAqB9B,KAAK,CAACuC,eAAN,CAAsBT,YAAtB,CAAzB,EAA8D;AAC5D;AACAnB,QAAAA,CAAC,CAAC6B,cAAF;AACAxC,QAAAA,KAAK,CAACyC,eAAN,CAAsBX,YAAtB;AACAtB,QAAAA,cAAc,CAACkC,OAAf,GAAyBnC,EAAzB;AACAP,QAAAA,KAAK,CAAC2C,gBAAN,CAAuBb,YAAvB,EAAqC,IAArC;AACA9B,QAAAA,KAAK,CAAC4C,aAAN,CAAoBd,YAApB,EAAkCF,KAAlC;AACA5B,QAAAA,KAAK,CAAC2C,gBAAN,CAAuBb,YAAvB,EAAqC,KAArC;AACD;AACF;AACF,GAnDD;;AAqDA,SAAO;AACL5B,IAAAA,UADK;AAEL2C,IAAAA,UAAU,EAAE,EAFP;AAGLC,IAAAA,UAAU,EAAE;AACVC,MAAAA,OAAO,EAAGpC,CAAD,IAAY;AACnB,cAAM;AAAEqC,UAAAA,SAAF;AAAaC,UAAAA;AAAb,YAA2BtC,CAAC,CAACuC,WAAnC;AACAxC,QAAAA,WAAW,CAACC,CAAD,EAAIF,SAAJ,EAAeuC,SAAf,EAA0BC,SAA1B,CAAX;AACD;AAJS,KAHP;AASLE,IAAAA,WAAW,EAAE;AATR,GAAP;AAWD","sourcesContent":["import { sliderIds } from './utils';\nimport { AriaSliderProps } from '@react-types/slider';\nimport React, { useRef } from 'react';\nimport { SliderState } from '@react-stately/slider';\nimport { useLabel } from '@react-aria/label';\nimport { isRTL } from '@react-native-aria/utils';\n\ninterface SliderAria {\n  /** Props for the label element. */\n  labelProps: any;\n\n  /** Props for the root element of the slider component; groups slider inputs. */\n  groupProps: any;\n\n  /** Props for the track element. */\n  trackProps: any;\n\n  /** Props for the output element, displaying the value of the slider thumbs. */\n  outputProps: any;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a slider component representing one or more values.\n *\n * @param props Props for the slider.\n * @param state State for the slider, as returned by `useSliderState`.\n * @param trackRef Ref for the \"track\" element.  The width of this element provides the \"length\"\n * of the track -- the span of one dimensional space that the slider thumb can be.  It also\n * accepts click and drag motions, so that the closest thumb will follow clicks and drags on\n * the track.\n */\nexport function useSlider(\n  props: AriaSliderProps,\n  state: SliderState,\n  trackLayout: any\n): SliderAria {\n  let { labelProps, fieldProps } = useLabel(props);\n\n  let isVertical = props.orientation === 'vertical';\n\n  sliderIds.set(state, labelProps.id ?? fieldProps.id);\n  let currentPointer = useRef<number | null | undefined>(undefined);\n\n  let onDownTrack = (\n    e: React.UIEvent,\n    id: number,\n    clientX: number,\n    clientY: number\n  ) => {\n    const direction = isRTL() ? 'rtl' : undefined;\n    if (\n      !props.isDisabled &&\n      state.values.every((_, i) => !state.isThumbDragging(i))\n    ) {\n      let size = isVertical ? trackLayout.height : trackLayout.width;\n      // Find the closest thumb\n      const trackPosition = trackLayout[isVertical ? 'y' : 'x'];\n      const clickPosition = isVertical ? clientY : clientX;\n      const offset = clickPosition - trackPosition;\n      let percent = offset / size;\n      if (direction === 'rtl' || isVertical) {\n        percent = 1 - percent;\n      }\n      let value = state.getPercentValue(percent);\n      // to find the closet thumb we split the array based on the first thumb position to the \"right/end\" of the click.\n      let closestThumb;\n      let split = state.values.findIndex((v) => value - v < 0);\n      if (split === 0) {\n        // If the index is zero then the closetThumb is the first one\n        closestThumb = split;\n      } else if (split === -1) {\n        // If no index is found they've clicked past all the thumbs\n        closestThumb = state.values.length - 1;\n      } else {\n        let lastLeft = state.values[split - 1];\n        let firstRight = state.values[split];\n        // Pick the last left/start thumb, unless they are stacked on top of each other, then pick the right/end one\n        if (Math.abs(lastLeft - value) < Math.abs(firstRight - value)) {\n          closestThumb = split - 1;\n        } else {\n          closestThumb = split;\n        }\n      }\n      // Confirm that the found closest thumb is editable, not disabled, and move it\n      if (closestThumb >= 0 && state.isThumbEditable(closestThumb)) {\n        // Don't unfocus anything\n        e.preventDefault();\n        state.setFocusedThumb(closestThumb);\n        currentPointer.current = id;\n        state.setThumbDragging(closestThumb, true);\n        state.setThumbValue(closestThumb, value);\n        state.setThumbDragging(closestThumb, false);\n      }\n    }\n  };\n\n  return {\n    labelProps,\n    groupProps: {},\n    trackProps: {\n      onPress: (e: any) => {\n        const { locationX, locationY } = e.nativeEvent;\n        onDownTrack(e, undefined, locationX, locationY);\n      },\n    },\n    outputProps: {},\n  };\n}\n"]}
+{"version":3,"sources":["useSlider.ts"],"names":["sliderIds","useRef","useLabel","isRTL","useSlider","props","state","trackLayout","isReversed","labelProps","fieldProps","isVertical","orientation","set","id","currentPointer","undefined","onDownTrack","e","clientX","clientY","direction","reverseX","isDisabled","values","every","_","i","isThumbDragging","size","height","width","trackPosition","clickPosition","offset","percent","value","getPercentValue","closestThumb","split","findIndex","v","length","lastLeft","firstRight","Math","abs","isThumbEditable","preventDefault","setFocusedThumb","current","setThumbDragging","setThumbValue","groupProps","trackProps","onPress","locationX","locationY","nativeEvent","outputProps"],"mappings":"AAAA,SAASA,SAAT,QAA0B,SAA1B;AAEA,SAAgBC,MAAhB,QAA8B,OAA9B;AAEA,SAASC,QAAT,QAAyB,mBAAzB;AACA,SAASC,KAAT,QAAsB,0BAAtB;;AAgBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,SAAT,CACLC,KADK,EAELC,KAFK,EAGLC,WAHK,EAILC,UAJK,EAKO;AAAA;;AACZ,MAAI;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,MAA6BR,QAAQ,CAACG,KAAD,CAAzC;AAEA,MAAIM,UAAU,GAAGN,KAAK,CAACO,WAAN,KAAsB,UAAvC;AAEAZ,EAAAA,SAAS,CAACa,GAAV,CAAcP,KAAd,oBAAqBG,UAAU,CAACK,EAAhC,2DAAsCJ,UAAU,CAACI,EAAjD;AACA,MAAIC,cAAc,GAAGd,MAAM,CAA4Be,SAA5B,CAA3B;;AAEA,MAAIC,WAAW,GAAG,CAChBC,CADgB,EAEhBJ,EAFgB,EAGhBK,OAHgB,EAIhBC,OAJgB,KAKb;AACH,UAAMC,SAAS,GAAGlB,KAAK,KAAK,KAAL,GAAaa,SAApC;AACA,UAAMM,QAAQ,GAAGd,UAAU,IAAIa,SAAS,KAAK,KAA7C;;AACA,QACE,CAAChB,KAAK,CAACkB,UAAP,IACAjB,KAAK,CAACkB,MAAN,CAAaC,KAAb,CAAmB,CAACC,CAAD,EAAIC,CAAJ,KAAU,CAACrB,KAAK,CAACsB,eAAN,CAAsBD,CAAtB,CAA9B,CAFF,EAGE;AACA,UAAIE,IAAI,GAAGlB,UAAU,GAAGJ,WAAW,CAACuB,MAAf,GAAwBvB,WAAW,CAACwB,KAAzD,CADA,CAEA;;AACA,YAAMC,aAAa,GAAGzB,WAAW,CAACI,UAAU,GAAG,GAAH,GAAS,GAApB,CAAjC;AACA,YAAMsB,aAAa,GAAGtB,UAAU,GAAGS,OAAH,GAAaD,OAA7C;AACA,YAAMe,MAAM,GAAGD,aAAa,GAAGD,aAA/B;AACA,UAAIG,OAAO,GAAGD,MAAM,GAAGL,IAAvB;;AACA,UAAIP,QAAJ,EAAc;AACZ,YAAI,CAACX,UAAL,EAAiB;AACfwB,UAAAA,OAAO,GAAG,IAAIA,OAAd;AACD;AACF,OAJD,MAIO;AACL,YAAIxB,UAAJ,EAAgB;AACdwB,UAAAA,OAAO,GAAG,IAAIA,OAAd;AACD;AACF;;AACD,UAAIC,KAAK,GAAG9B,KAAK,CAAC+B,eAAN,CAAsBF,OAAtB,CAAZ,CAhBA,CAiBA;;AACA,UAAIG,YAAJ;AACA,UAAIC,KAAK,GAAGjC,KAAK,CAACkB,MAAN,CAAagB,SAAb,CAAwBC,CAAD,IAAOL,KAAK,GAAGK,CAAR,GAAY,CAA1C,CAAZ;;AACA,UAAIF,KAAK,KAAK,CAAd,EAAiB;AACf;AACAD,QAAAA,YAAY,GAAGC,KAAf;AACD,OAHD,MAGO,IAAIA,KAAK,KAAK,CAAC,CAAf,EAAkB;AACvB;AACAD,QAAAA,YAAY,GAAGhC,KAAK,CAACkB,MAAN,CAAakB,MAAb,GAAsB,CAArC;AACD,OAHM,MAGA;AACL,YAAIC,QAAQ,GAAGrC,KAAK,CAACkB,MAAN,CAAae,KAAK,GAAG,CAArB,CAAf;AACA,YAAIK,UAAU,GAAGtC,KAAK,CAACkB,MAAN,CAAae,KAAb,CAAjB,CAFK,CAGL;;AACA,YAAIM,IAAI,CAACC,GAAL,CAASH,QAAQ,GAAGP,KAApB,IAA6BS,IAAI,CAACC,GAAL,CAASF,UAAU,GAAGR,KAAtB,CAAjC,EAA+D;AAC7DE,UAAAA,YAAY,GAAGC,KAAK,GAAG,CAAvB;AACD,SAFD,MAEO;AACLD,UAAAA,YAAY,GAAGC,KAAf;AACD;AACF,OAnCD,CAoCA;;;AACA,UAAID,YAAY,IAAI,CAAhB,IAAqBhC,KAAK,CAACyC,eAAN,CAAsBT,YAAtB,CAAzB,EAA8D;AAC5D;AACApB,QAAAA,CAAC,CAAC8B,cAAF;AACA1C,QAAAA,KAAK,CAAC2C,eAAN,CAAsBX,YAAtB;AACAvB,QAAAA,cAAc,CAACmC,OAAf,GAAyBpC,EAAzB;AACAR,QAAAA,KAAK,CAAC6C,gBAAN,CAAuBb,YAAvB,EAAqC,IAArC;AACAhC,QAAAA,KAAK,CAAC8C,aAAN,CAAoBd,YAApB,EAAkCF,KAAlC;AACA9B,QAAAA,KAAK,CAAC6C,gBAAN,CAAuBb,YAAvB,EAAqC,KAArC;AACD;AACF;AACF,GA1DD;;AA4DA,SAAO;AACL7B,IAAAA,UADK;AAEL4C,IAAAA,UAAU,EAAE,EAFP;AAGLC,IAAAA,UAAU,EAAE;AACVC,MAAAA,OAAO,EAAGrC,CAAD,IAAY;AACnB,cAAM;AAAEsC,UAAAA,SAAF;AAAaC,UAAAA;AAAb,YAA2BvC,CAAC,CAACwC,WAAnC;AACAzC,QAAAA,WAAW,CAACC,CAAD,EAAIF,SAAJ,EAAewC,SAAf,EAA0BC,SAA1B,CAAX;AACD;AAJS,KAHP;AASLE,IAAAA,WAAW,EAAE;AATR,GAAP;AAWD","sourcesContent":["import { sliderIds } from './utils';\nimport { AriaSliderProps } from '@react-types/slider';\nimport React, { useRef } from 'react';\nimport { SliderState } from '@react-stately/slider';\nimport { useLabel } from '@react-aria/label';\nimport { isRTL } from '@react-native-aria/utils';\n\ninterface SliderAria {\n  /** Props for the label element. */\n  labelProps: any;\n\n  /** Props for the root element of the slider component; groups slider inputs. */\n  groupProps: any;\n\n  /** Props for the track element. */\n  trackProps: any;\n\n  /** Props for the output element, displaying the value of the slider thumbs. */\n  outputProps: any;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a slider component representing one or more values.\n *\n * @param props Props for the slider.\n * @param state State for the slider, as returned by `useSliderState`.\n * @param trackRef Ref for the \"track\" element.  The width of this element provides the \"length\"\n * of the track -- the span of one dimensional space that the slider thumb can be.  It also\n * accepts click and drag motions, so that the closest thumb will follow clicks and drags on\n * the track.\n */\nexport function useSlider(\n  props: AriaSliderProps,\n  state: SliderState,\n  trackLayout: any,\n  isReversed?: boolean\n): SliderAria {\n  let { labelProps, fieldProps } = useLabel(props);\n\n  let isVertical = props.orientation === 'vertical';\n\n  sliderIds.set(state, labelProps.id ?? fieldProps.id);\n  let currentPointer = useRef<number | null | undefined>(undefined);\n\n  let onDownTrack = (\n    e: React.UIEvent,\n    id: number,\n    clientX: number,\n    clientY: number\n  ) => {\n    const direction = isRTL() ? 'rtl' : undefined;\n    const reverseX = isReversed || direction === 'rtl';\n    if (\n      !props.isDisabled &&\n      state.values.every((_, i) => !state.isThumbDragging(i))\n    ) {\n      let size = isVertical ? trackLayout.height : trackLayout.width;\n      // Find the closest thumb\n      const trackPosition = trackLayout[isVertical ? 'y' : 'x'];\n      const clickPosition = isVertical ? clientY : clientX;\n      const offset = clickPosition - trackPosition;\n      let percent = offset / size;\n      if (reverseX) {\n        if (!isVertical) {\n          percent = 1 - percent;\n        }\n      } else {\n        if (isVertical) {\n          percent = 1 - percent;\n        }\n      }\n      let value = state.getPercentValue(percent);\n      // to find the closet thumb we split the array based on the first thumb position to the \"right/end\" of the click.\n      let closestThumb;\n      let split = state.values.findIndex((v) => value - v < 0);\n      if (split === 0) {\n        // If the index is zero then the closetThumb is the first one\n        closestThumb = split;\n      } else if (split === -1) {\n        // If no index is found they've clicked past all the thumbs\n        closestThumb = state.values.length - 1;\n      } else {\n        let lastLeft = state.values[split - 1];\n        let firstRight = state.values[split];\n        // Pick the last left/start thumb, unless they are stacked on top of each other, then pick the right/end one\n        if (Math.abs(lastLeft - value) < Math.abs(firstRight - value)) {\n          closestThumb = split - 1;\n        } else {\n          closestThumb = split;\n        }\n      }\n      // Confirm that the found closest thumb is editable, not disabled, and move it\n      if (closestThumb >= 0 && state.isThumbEditable(closestThumb)) {\n        // Don't unfocus anything\n        e.preventDefault();\n        state.setFocusedThumb(closestThumb);\n        currentPointer.current = id;\n        state.setThumbDragging(closestThumb, true);\n        state.setThumbValue(closestThumb, value);\n        state.setThumbDragging(closestThumb, false);\n      }\n    }\n  };\n\n  return {\n    labelProps,\n    groupProps: {},\n    trackProps: {\n      onPress: (e: any) => {\n        const { locationX, locationY } = e.nativeEvent;\n        onDownTrack(e, undefined, locationX, locationY);\n      },\n    },\n    outputProps: {},\n  };\n}\n"]}

package/lib/module/useSlider.web.js

@@ -6,7 +6,7 @@ import { useLabel } from '@react-aria/label';
 import { mapDomPropsToRN, isRTL } from '@react-native-aria/utils';
 import { useMove } from './useMove';
 
-function useSliderWeb(props, state, trackLayout) {
+function useSliderWeb(props, state, trackLayout, isReversed) {
   var _labelProps$id;
 
   let {
@@ -28,7 +28,7 @@ function useSliderWeb(props, state, trackLayout) {
   const realTimeTrackDraggingIndex = useRef(null);
   const stateRef = useRef(null);
   stateRef.current = state;
-  const reverseX = direction === 'rtl';
+  const reverseX = isReversed || direction === 'rtl';
   const currentPosition = useRef(null);
   const {
     moveProps
@@ -49,8 +49,14 @@ function useSliderWeb(props, state, trackLayout) {
 
       let delta = isVertical ? deltaY : deltaX;
 
-      if (isVertical || reverseX) {
-        delta = -delta;
+      if (reverseX) {
+        if (!isVertical) {
+          delta = -delta;
+        }
+      } else {
+        if (isVertical) {
+          delta = -delta;
+        }
       }
 
       currentPosition.current += delta;
@@ -81,8 +87,14 @@ function useSliderWeb(props, state, trackLayout) {
       const offset = clickPosition - trackPosition;
       let percent = offset / size;
 
-      if (direction === 'rtl' || isVertical) {
-        percent = 1 - percent;
+      if (reverseX) {
+        if (!isVertical) {
+          percent = 1 - percent;
+        }
+      } else {
+        if (isVertical) {
+          percent = 1 - percent;
+        }
       }
 
       let value = state.getPercentValue(percent); // to find the closet thumb we split the array based on the first thumb position to the "right/end" of the click.
@@ -197,11 +209,11 @@ function useSliderWeb(props, state, trackLayout) {
   };
 }
 
-export const useSlider = (props, state, ref) => {
+export const useSlider = (props, state, ref, isReversed) => {
   let {
     groupProps: webGroupProps,
     ...rest
-  } = useSliderWeb(props, state, ref);
+  } = useSliderWeb(props, state, ref, isReversed);
   let groupProps = mapDomPropsToRN(webGroupProps);
   let labelProps = mapDomPropsToRN(rest.labelProps);
   return {

package/lib/module/useSlider.web.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSlider.web.ts"],"names":["clamp","mergeProps","useGlobalListeners","getSliderThumbId","sliderIds","useRef","setInteractionModality","useLabel","mapDomPropsToRN","isRTL","useMove","useSliderWeb","props","state","trackLayout","labelProps","fieldProps","isVertical","orientation","set","id","direction","undefined","addGlobalListener","removeGlobalListener","realTimeTrackDraggingIndex","stateRef","current","reverseX","currentPosition","moveProps","onMoveStart","onMove","deltaX","deltaY","size","height","width","getThumbPercent","delta","percent","setThumbPercent","onMoveEnd","setThumbDragging","currentPointer","onDownTrack","e","clientX","clientY","isDisabled","values","every","_","i","isThumbDragging","trackPosition","clickPosition","offset","value","getPercentValue","closestThumb","split","findIndex","v","length","lastLeft","firstRight","Math","abs","isThumbEditable","preventDefault","setFocusedThumb","setThumbValue","window","onUpTrack","pointerId","changedTouches","identifier","htmlFor","onClick","document","getElementById","focus","groupProps","role","trackProps","onMouseDown","button","altKey","ctrlKey","metaKey","onPointerDown","pointerType","onTouchStart","outputProps","map","index","join","useSlider","ref","webGroupProps","rest"],"mappings":"AACA,SAASA,KAAT,EAAgBC,UAAhB,EAA4BC,kBAA5B,QAAsD,mBAAtD;AACA,SAASC,gBAAT,EAA2BC,SAA3B,QAA4C,SAA5C;AACA,SAAgBC,MAAhB,QAA8B,OAA9B;AACA,SAASC,sBAAT,QAAuC,0BAAvC;AAEA,SAASC,QAAT,QAAyB,mBAAzB;AACA,SAASC,eAAT,EAA0BC,KAA1B,QAAuC,0BAAvC;AACA,SAASC,OAAT,QAAwB,WAAxB;;AAgBA,SAASC,YAAT,CACEC,KADF,EAEEC,KAFF,EAGEC,WAHF,EAWc;AAAA;;AACZ,MAAI;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,MAA6BT,QAAQ,CAACK,KAAD,CAAzC;AAEA,MAAIK,UAAU,GAAGL,KAAK,CAACM,WAAN,KAAsB,UAAvC,CAHY,CAKZ;;AACAd,EAAAA,SAAS,CAACe,GAAV,CAAcN,KAAd,oBAAqBE,UAAU,CAACK,EAAhC,2DAAsCJ,UAAU,CAACI,EAAjD;AAEA,QAAMC,SAAS,GAAGZ,KAAK,KAAK,KAAL,GAAaa,SAApC;AAEA,MAAI;AAAEC,IAAAA,iBAAF;AAAqBC,IAAAA;AAArB,MAA8CtB,kBAAkB,EAApE,CAVY,CAYZ;AACA;AACA;AACA;;AACA,QAAMuB,0BAA0B,GAAGpB,MAAM,CAAgB,IAAhB,CAAzC;AAEA,QAAMqB,QAAQ,GAAGrB,MAAM,CAAc,IAAd,CAAvB;AACAqB,EAAAA,QAAQ,CAACC,OAAT,GAAmBd,KAAnB;AACA,QAAMe,QAAQ,GAAGP,SAAS,KAAK,KAA/B;AACA,QAAMQ,eAAe,GAAGxB,MAAM,CAAS,IAAT,CAA9B;AACA,QAAM;AAAEyB,IAAAA;AAAF,MAAgBpB,OAAO,CAAC;AAC5BqB,IAAAA,WAAW,GAAG;AACZF,MAAAA,eAAe,CAACF,OAAhB,GAA0B,IAA1B;AACD,KAH2B;;AAI5BK,IAAAA,MAAM,CAAC;AAAEC,MAAAA,MAAF;AAAUC,MAAAA;AAAV,KAAD,EAAqB;AACzB,UAAIC,IAAI,GAAGlB,UAAU,GAAGH,WAAW,CAACsB,MAAf,GAAwBtB,WAAW,CAACuB,KAAzD;;AAEA,UAAIR,eAAe,CAACF,OAAhB,IAA2B,IAA/B,EAAqC;AACnCE,QAAAA,eAAe,CAACF,OAAhB,GACED,QAAQ,CAACC,OAAT,CAAiBW,eAAjB,CAAiCb,0BAA0B,CAACE,OAA5D,IACAQ,IAFF;AAGD;;AAED,UAAII,KAAK,GAAGtB,UAAU,GAAGiB,MAAH,GAAYD,MAAlC;;AACA,UAAIhB,UAAU,IAAIW,QAAlB,EAA4B;AAC1BW,QAAAA,KAAK,GAAG,CAACA,KAAT;AACD;;AAEDV,MAAAA,eAAe,CAACF,OAAhB,IAA2BY,KAA3B;;AAEA,UAAId,0BAA0B,CAACE,OAA3B,IAAsC,IAA1C,EAAgD;AAC9C,cAAMa,OAAO,GAAGxC,KAAK,CAAC6B,eAAe,CAACF,OAAhB,GAA0BQ,IAA3B,EAAiC,CAAjC,EAAoC,CAApC,CAArB;AACAT,QAAAA,QAAQ,CAACC,OAAT,CAAiBc,eAAjB,CACEhB,0BAA0B,CAACE,OAD7B,EAEEa,OAFF;AAID;AACF,KA3B2B;;AA4B5BE,IAAAA,SAAS,GAAG;AACV,UAAIjB,0BAA0B,CAACE,OAA3B,IAAsC,IAA1C,EAAgD;AAC9CD,QAAAA,QAAQ,CAACC,OAAT,CAAiBgB,gBAAjB,CACElB,0BAA0B,CAACE,OAD7B,EAEE,KAFF;AAIAF,QAAAA,0BAA0B,CAACE,OAA3B,GAAqC,IAArC;AACD;AACF;;AApC2B,GAAD,CAA7B;AAuCA,MAAIiB,cAAc,GAAGvC,MAAM,CAA4BiB,SAA5B,CAA3B;;AACA,MAAIuB,WAAW,GAAG,CAChBC,CADgB,EAEhB1B,EAFgB,EAGhB2B,OAHgB,EAIhBC,OAJgB,KAKb;AACH;AACA,QACE,CAACpC,KAAK,CAACqC,UAAP,IACApC,KAAK,CAACqC,MAAN,CAAaC,KAAb,CAAmB,CAACC,CAAD,EAAIC,CAAJ,KAAU,CAACxC,KAAK,CAACyC,eAAN,CAAsBD,CAAtB,CAA9B,CAFF,EAGE;AACA,UAAIlB,IAAI,GAAGlB,UAAU,GAAGH,WAAW,CAACsB,MAAf,GAAwBtB,WAAW,CAACuB,KAAzD,CADA,CAEA;;AACA,YAAMkB,aAAa,GAAGzC,WAAW,CAACG,UAAU,GAAG,KAAH,GAAW,MAAtB,CAAjC;AACA,YAAMuC,aAAa,GAAGvC,UAAU,GAAG+B,OAAH,GAAaD,OAA7C;AACA,YAAMU,MAAM,GAAGD,aAAa,GAAGD,aAA/B;AACA,UAAIf,OAAO,GAAGiB,MAAM,GAAGtB,IAAvB;;AACA,UAAId,SAAS,KAAK,KAAd,IAAuBJ,UAA3B,EAAuC;AACrCuB,QAAAA,OAAO,GAAG,IAAIA,OAAd;AACD;;AACD,UAAIkB,KAAK,GAAG7C,KAAK,CAAC8C,eAAN,CAAsBnB,OAAtB,CAAZ,CAVA,CAYA;;AACA,UAAIoB,YAAJ;AACA,UAAIC,KAAK,GAAGhD,KAAK,CAACqC,MAAN,CAAaY,SAAb,CAAwBC,CAAD,IAAOL,KAAK,GAAGK,CAAR,GAAY,CAA1C,CAAZ;;AACA,UAAIF,KAAK,KAAK,CAAd,EAAiB;AACf;AACAD,QAAAA,YAAY,GAAGC,KAAf;AACD,OAHD,MAGO,IAAIA,KAAK,KAAK,CAAC,CAAf,EAAkB;AACvB;AACAD,QAAAA,YAAY,GAAG/C,KAAK,CAACqC,MAAN,CAAac,MAAb,GAAsB,CAArC;AACD,OAHM,MAGA;AACL,YAAIC,QAAQ,GAAGpD,KAAK,CAACqC,MAAN,CAAaW,KAAK,GAAG,CAArB,CAAf;AACA,YAAIK,UAAU,GAAGrD,KAAK,CAACqC,MAAN,CAAaW,KAAb,CAAjB,CAFK,CAGL;;AACA,YAAIM,IAAI,CAACC,GAAL,CAASH,QAAQ,GAAGP,KAApB,IAA6BS,IAAI,CAACC,GAAL,CAASF,UAAU,GAAGR,KAAtB,CAAjC,EAA+D;AAC7DE,UAAAA,YAAY,GAAGC,KAAK,GAAG,CAAvB;AACD,SAFD,MAEO;AACLD,UAAAA,YAAY,GAAGC,KAAf;AACD;AACF,OA9BD,CAgCA;;;AACA,UAAID,YAAY,IAAI,CAAhB,IAAqB/C,KAAK,CAACwD,eAAN,CAAsBT,YAAtB,CAAzB,EAA8D;AAC5D;AACAd,QAAAA,CAAC,CAACwB,cAAF;AAEA7C,QAAAA,0BAA0B,CAACE,OAA3B,GAAqCiC,YAArC;AACA/C,QAAAA,KAAK,CAAC0D,eAAN,CAAsBX,YAAtB;AACAhB,QAAAA,cAAc,CAACjB,OAAf,GAAyBP,EAAzB;AAEAP,QAAAA,KAAK,CAAC8B,gBAAN,CAAuBlB,0BAA0B,CAACE,OAAlD,EAA2D,IAA3D;AACAd,QAAAA,KAAK,CAAC2D,aAAN,CAAoBZ,YAApB,EAAkCF,KAAlC;AAEAnC,QAAAA,iBAAiB,CAACkD,MAAD,EAAS,SAAT,EAAoBC,SAApB,EAA+B,KAA/B,CAAjB;AACAnD,QAAAA,iBAAiB,CAACkD,MAAD,EAAS,UAAT,EAAqBC,SAArB,EAAgC,KAAhC,CAAjB;AACAnD,QAAAA,iBAAiB,CAACkD,MAAD,EAAS,WAAT,EAAsBC,SAAtB,EAAiC,KAAjC,CAAjB;AACD,OAdD,MAcO;AACLjD,QAAAA,0BAA0B,CAACE,OAA3B,GAAqC,IAArC;AACD;AACF;AACF,GA7DD;;AA+DA,MAAI+C,SAAS,GAAI5B,CAAD,IAAO;AAAA;;AACrB,QAAI1B,EAAE,mBAAG0B,CAAC,CAAC6B,SAAL,4EAAkB7B,CAAC,CAAC8B,cAApB,sDAAkB,kBAAmB,CAAnB,EAAsBC,UAA9C;;AACA,QAAIzD,EAAE,KAAKwB,cAAc,CAACjB,OAA1B,EAAmC;AACjC,UAAIF,0BAA0B,CAACE,OAA3B,IAAsC,IAA1C,EAAgD;AAC9Cd,QAAAA,KAAK,CAAC8B,gBAAN,CAAuBlB,0BAA0B,CAACE,OAAlD,EAA2D,KAA3D;AACAF,QAAAA,0BAA0B,CAACE,OAA3B,GAAqC,IAArC;AACD;;AAEDH,MAAAA,oBAAoB,CAACiD,MAAD,EAAS,SAAT,EAAoBC,SAApB,EAA+B,KAA/B,CAApB;AACAlD,MAAAA,oBAAoB,CAACiD,MAAD,EAAS,UAAT,EAAqBC,SAArB,EAAgC,KAAhC,CAApB;AACAlD,MAAAA,oBAAoB,CAACiD,MAAD,EAAS,WAAT,EAAsBC,SAAtB,EAAiC,KAAjC,CAApB;AACD;AACF,GAZD;;AAcA,MAAI3D,UAAU,CAAC+D,OAAf,EAAwB;AACtB;AACA;AACA;AACA;AACA,WAAO/D,UAAU,CAAC+D,OAAlB;;AACA/D,IAAAA,UAAU,CAACgE,OAAX,GAAqB,MAAM;AAAA;;AACzB;AACA;AACA,+BAAAC,QAAQ,CAACC,cAAT,CAAwB9E,gBAAgB,CAACU,KAAD,EAAQ,CAAR,CAAxC,iFAAqDqE,KAArD;AACA5E,MAAAA,sBAAsB,CAAC,UAAD,CAAtB;AACD,KALD;AAMD;;AAED,SAAO;AACLS,IAAAA,UADK;AAEL;AACA;AACA;AACAoE,IAAAA,UAAU,EAAE;AACVC,MAAAA,IAAI,EAAE,OADI;AAEV,SAAGpE;AAFO,KALP;AASLqE,IAAAA,UAAU,EAAEpF,UAAU,CACpB;AACEqF,MAAAA,WAAW,CAACxC,CAAD,EAAmC;AAC5C,YAAIA,CAAC,CAACyC,MAAF,KAAa,CAAb,IAAkBzC,CAAC,CAAC0C,MAApB,IAA8B1C,CAAC,CAAC2C,OAAhC,IAA2C3C,CAAC,CAAC4C,OAAjD,EAA0D;AACxD;AACD;;AACD7C,QAAAA,WAAW,CAACC,CAAD,EAAIxB,SAAJ,EAAewB,CAAC,CAACC,OAAjB,EAA0BD,CAAC,CAACE,OAA5B,CAAX;AACD,OANH;;AAOE2C,MAAAA,aAAa,CAAC7C,CAAD,EAAqC;AAChD,YACEA,CAAC,CAAC8C,WAAF,KAAkB,OAAlB,KACC9C,CAAC,CAACyC,MAAF,KAAa,CAAb,IAAkBzC,CAAC,CAAC0C,MAApB,IAA8B1C,CAAC,CAAC2C,OAAhC,IAA2C3C,CAAC,CAAC4C,OAD9C,CADF,EAGE;AACA;AACD;;AACD7C,QAAAA,WAAW,CAACC,CAAD,EAAIA,CAAC,CAAC6B,SAAN,EAAiB7B,CAAC,CAACC,OAAnB,EAA4BD,CAAC,CAACE,OAA9B,CAAX;AACD,OAfH;;AAgBE6C,MAAAA,YAAY,CAAC/C,CAAD,EAAmC;AAC7CD,QAAAA,WAAW,CACTC,CADS,EAETA,CAAC,CAAC8B,cAAF,CAAiB,CAAjB,EAAoBC,UAFX,EAGT/B,CAAC,CAAC8B,cAAF,CAAiB,CAAjB,EAAoB7B,OAHX,EAITD,CAAC,CAAC8B,cAAF,CAAiB,CAAjB,EAAoB5B,OAJX,CAAX;AAMD;;AAvBH,KADoB,EA0BpBlB,SA1BoB,CATjB;AAqCLgE,IAAAA,WAAW,EAAE;AACX,iBAAWjF,KAAK,CAACqC,MAAN,CACR6C,GADQ,CACJ,CAAC3C,CAAD,EAAI4C,KAAJ,KAAc7F,gBAAgB,CAACU,KAAD,EAAQmF,KAAR,CAD1B,EAERC,IAFQ,CAEH,GAFG,CADA;AAIX,mBAAa;AAJF;AArCR,GAAP;AA4CD;;AAED,OAAO,MAAMC,SAAS,GAAG,CAACtF,KAAD,EAAaC,KAAb,EAAyBsF,GAAzB,KAAsC;AAC7D,MAAI;AAAEhB,IAAAA,UAAU,EAAEiB,aAAd;AAA6B,OAAGC;AAAhC,MAAyC1F,YAAY,CAACC,KAAD,EAAQC,KAAR,EAAesF,GAAf,CAAzD;AACA,MAAIhB,UAAU,GAAG3E,eAAe,CAAC4F,aAAD,CAAhC;AACA,MAAIrF,UAAU,GAAGP,eAAe,CAAC6F,IAAI,CAACtF,UAAN,CAAhC;AACA,SAAO;AAAEoE,IAAAA,UAAF;AAAc,OAAGkB,IAAjB;AAAuBtF,IAAAA;AAAvB,GAAP;AACD,CALM","sourcesContent":["import { AriaSliderProps } from '@react-types/slider';\nimport { clamp, mergeProps, useGlobalListeners } from '@react-aria/utils';\nimport { getSliderThumbId, sliderIds } from './utils';\nimport React, { useRef } from 'react';\nimport { setInteractionModality } from '@react-aria/interactions';\nimport { SliderState } from '@react-stately/slider';\nimport { useLabel } from '@react-aria/label';\nimport { mapDomPropsToRN, isRTL } from '@react-native-aria/utils';\nimport { useMove } from './useMove';\n\ninterface SliderAria {\n  /** Props for the label element. */\n  labelProps: any;\n\n  /** Props for the root element of the slider component; groups slider inputs. */\n  groupProps: any;\n\n  /** Props for the track element. */\n  trackProps: any;\n\n  /** Props for the output element, displaying the value of the slider thumbs. */\n  outputProps: any;\n}\n\nfunction useSliderWeb(\n  props: AriaSliderProps,\n  state: SliderState,\n  trackLayout: {\n    height: number;\n    width: number;\n    top: number;\n    left: number;\n    x: number;\n    y: number;\n  }\n): SliderAria {\n  let { labelProps, fieldProps } = useLabel(props);\n\n  let isVertical = props.orientation === 'vertical';\n\n  // Attach id of the label to the state so it can be accessed by useSliderThumb.\n  sliderIds.set(state, labelProps.id ?? fieldProps.id);\n\n  const direction = isRTL() ? 'rtl' : undefined;\n\n  let { addGlobalListener, removeGlobalListener } = useGlobalListeners();\n\n  // When the user clicks or drags the track, we want the motion to set and drag the\n  // closest thumb.  Hence we also need to install useMove() on the track element.\n  // Here, we keep track of which index is the \"closest\" to the drag start point.\n  // It is set onMouseDown/onTouchDown; see trackProps below.\n  const realTimeTrackDraggingIndex = useRef<number | null>(null);\n\n  const stateRef = useRef<SliderState>(null);\n  stateRef.current = state;\n  const reverseX = direction === 'rtl';\n  const currentPosition = useRef<number>(null);\n  const { moveProps } = useMove({\n    onMoveStart() {\n      currentPosition.current = null;\n    },\n    onMove({ deltaX, deltaY }) {\n      let size = isVertical ? trackLayout.height : trackLayout.width;\n\n      if (currentPosition.current == null) {\n        currentPosition.current =\n          stateRef.current.getThumbPercent(realTimeTrackDraggingIndex.current) *\n          size;\n      }\n\n      let delta = isVertical ? deltaY : deltaX;\n      if (isVertical || reverseX) {\n        delta = -delta;\n      }\n\n      currentPosition.current += delta;\n\n      if (realTimeTrackDraggingIndex.current != null) {\n        const percent = clamp(currentPosition.current / size, 0, 1);\n        stateRef.current.setThumbPercent(\n          realTimeTrackDraggingIndex.current,\n          percent\n        );\n      }\n    },\n    onMoveEnd() {\n      if (realTimeTrackDraggingIndex.current != null) {\n        stateRef.current.setThumbDragging(\n          realTimeTrackDraggingIndex.current,\n          false\n        );\n        realTimeTrackDraggingIndex.current = null;\n      }\n    },\n  });\n\n  let currentPointer = useRef<number | null | undefined>(undefined);\n  let onDownTrack = (\n    e: React.UIEvent,\n    id: number,\n    clientX: number,\n    clientY: number\n  ) => {\n    // We only trigger track-dragging if the user clicks on the track itself and nothing is currently being dragged.\n    if (\n      !props.isDisabled &&\n      state.values.every((_, i) => !state.isThumbDragging(i))\n    ) {\n      let size = isVertical ? trackLayout.height : trackLayout.width;\n      // Find the closest thumb\n      const trackPosition = trackLayout[isVertical ? 'top' : 'left'];\n      const clickPosition = isVertical ? clientY : clientX;\n      const offset = clickPosition - trackPosition;\n      let percent = offset / size;\n      if (direction === 'rtl' || isVertical) {\n        percent = 1 - percent;\n      }\n      let value = state.getPercentValue(percent);\n\n      // to find the closet thumb we split the array based on the first thumb position to the \"right/end\" of the click.\n      let closestThumb;\n      let split = state.values.findIndex((v) => value - v < 0);\n      if (split === 0) {\n        // If the index is zero then the closetThumb is the first one\n        closestThumb = split;\n      } else if (split === -1) {\n        // If no index is found they've clicked past all the thumbs\n        closestThumb = state.values.length - 1;\n      } else {\n        let lastLeft = state.values[split - 1];\n        let firstRight = state.values[split];\n        // Pick the last left/start thumb, unless they are stacked on top of each other, then pick the right/end one\n        if (Math.abs(lastLeft - value) < Math.abs(firstRight - value)) {\n          closestThumb = split - 1;\n        } else {\n          closestThumb = split;\n        }\n      }\n\n      // Confirm that the found closest thumb is editable, not disabled, and move it\n      if (closestThumb >= 0 && state.isThumbEditable(closestThumb)) {\n        // Don't unfocus anything\n        e.preventDefault();\n\n        realTimeTrackDraggingIndex.current = closestThumb;\n        state.setFocusedThumb(closestThumb);\n        currentPointer.current = id;\n\n        state.setThumbDragging(realTimeTrackDraggingIndex.current, true);\n        state.setThumbValue(closestThumb, value);\n\n        addGlobalListener(window, 'mouseup', onUpTrack, false);\n        addGlobalListener(window, 'touchend', onUpTrack, false);\n        addGlobalListener(window, 'pointerup', onUpTrack, false);\n      } else {\n        realTimeTrackDraggingIndex.current = null;\n      }\n    }\n  };\n\n  let onUpTrack = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (id === currentPointer.current) {\n      if (realTimeTrackDraggingIndex.current != null) {\n        state.setThumbDragging(realTimeTrackDraggingIndex.current, false);\n        realTimeTrackDraggingIndex.current = null;\n      }\n\n      removeGlobalListener(window, 'mouseup', onUpTrack, false);\n      removeGlobalListener(window, 'touchend', onUpTrack, false);\n      removeGlobalListener(window, 'pointerup', onUpTrack, false);\n    }\n  };\n\n  if (labelProps.htmlFor) {\n    // Ideally the `for` attribute should point to the first thumb, but VoiceOver on iOS\n    // causes this to override the `aria-labelledby` on the thumb. This causes the first\n    // thumb to only be announced as the slider label rather than its individual name as well.\n    // See https://bugs.webkit.org/show_bug.cgi?id=172464.\n    delete labelProps.htmlFor;\n    labelProps.onClick = () => {\n      // Safari does not focus <input type=\"range\"> elements when clicking on an associated <label>,\n      // so do it manually. In addition, make sure we show the focus ring.\n      document.getElementById(getSliderThumbId(state, 0))?.focus();\n      setInteractionModality('keyboard');\n    };\n  }\n\n  return {\n    labelProps,\n    // The root element of the Slider will have role=\"group\" to group together\n    // all the thumb inputs in the Slider.  The label of the Slider will\n    // be used to label the group.\n    groupProps: {\n      role: 'group',\n      ...fieldProps,\n    },\n    trackProps: mergeProps(\n      {\n        onMouseDown(e: React.MouseEvent<HTMLElement>) {\n          if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n            return;\n          }\n          onDownTrack(e, undefined, e.clientX, e.clientY);\n        },\n        onPointerDown(e: React.PointerEvent<HTMLElement>) {\n          if (\n            e.pointerType === 'mouse' &&\n            (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)\n          ) {\n            return;\n          }\n          onDownTrack(e, e.pointerId, e.clientX, e.clientY);\n        },\n        onTouchStart(e: React.TouchEvent<HTMLElement>) {\n          onDownTrack(\n            e,\n            e.changedTouches[0].identifier,\n            e.changedTouches[0].clientX,\n            e.changedTouches[0].clientY\n          );\n        },\n      },\n      moveProps\n    ),\n    outputProps: {\n      'htmlFor': state.values\n        .map((_, index) => getSliderThumbId(state, index))\n        .join(' '),\n      'aria-live': 'off',\n    },\n  };\n}\n\nexport const useSlider = (props: any, state: any, ref: any) => {\n  let { groupProps: webGroupProps, ...rest } = useSliderWeb(props, state, ref);\n  let groupProps = mapDomPropsToRN(webGroupProps);\n  let labelProps = mapDomPropsToRN(rest.labelProps);\n  return { groupProps, ...rest, labelProps };\n};\n"]}
+{"version":3,"sources":["useSlider.web.ts"],"names":["clamp","mergeProps","useGlobalListeners","getSliderThumbId","sliderIds","useRef","setInteractionModality","useLabel","mapDomPropsToRN","isRTL","useMove","useSliderWeb","props","state","trackLayout","isReversed","labelProps","fieldProps","isVertical","orientation","set","id","direction","undefined","addGlobalListener","removeGlobalListener","realTimeTrackDraggingIndex","stateRef","current","reverseX","currentPosition","moveProps","onMoveStart","onMove","deltaX","deltaY","size","height","width","getThumbPercent","delta","percent","setThumbPercent","onMoveEnd","setThumbDragging","currentPointer","onDownTrack","e","clientX","clientY","isDisabled","values","every","_","i","isThumbDragging","trackPosition","clickPosition","offset","value","getPercentValue","closestThumb","split","findIndex","v","length","lastLeft","firstRight","Math","abs","isThumbEditable","preventDefault","setFocusedThumb","setThumbValue","window","onUpTrack","pointerId","changedTouches","identifier","htmlFor","onClick","document","getElementById","focus","groupProps","role","trackProps","onMouseDown","button","altKey","ctrlKey","metaKey","onPointerDown","pointerType","onTouchStart","outputProps","map","index","join","useSlider","ref","webGroupProps","rest"],"mappings":"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","sourcesContent":["import { AriaSliderProps } from '@react-types/slider';\nimport { clamp, mergeProps, useGlobalListeners } from '@react-aria/utils';\nimport { getSliderThumbId, sliderIds } from './utils';\nimport React, { useRef } from 'react';\nimport { setInteractionModality } from '@react-aria/interactions';\nimport { SliderState } from '@react-stately/slider';\nimport { useLabel } from '@react-aria/label';\nimport { mapDomPropsToRN, isRTL } from '@react-native-aria/utils';\nimport { useMove } from './useMove';\n\ninterface SliderAria {\n  /** Props for the label element. */\n  labelProps: any;\n\n  /** Props for the root element of the slider component; groups slider inputs. */\n  groupProps: any;\n\n  /** Props for the track element. */\n  trackProps: any;\n\n  /** Props for the output element, displaying the value of the slider thumbs. */\n  outputProps: any;\n}\n\nfunction useSliderWeb(\n  props: AriaSliderProps,\n  state: SliderState,\n  trackLayout: {\n    height: number;\n    width: number;\n    top: number;\n    left: number;\n    x: number;\n    y: number;\n  },\n  isReversed?: boolean\n): SliderAria {\n  let { labelProps, fieldProps } = useLabel(props);\n\n  let isVertical = props.orientation === 'vertical';\n\n  // Attach id of the label to the state so it can be accessed by useSliderThumb.\n  sliderIds.set(state, labelProps.id ?? fieldProps.id);\n\n  const direction = isRTL() ? 'rtl' : undefined;\n\n  let { addGlobalListener, removeGlobalListener } = useGlobalListeners();\n\n  // When the user clicks or drags the track, we want the motion to set and drag the\n  // closest thumb.  Hence we also need to install useMove() on the track element.\n  // Here, we keep track of which index is the \"closest\" to the drag start point.\n  // It is set onMouseDown/onTouchDown; see trackProps below.\n  const realTimeTrackDraggingIndex = useRef<number | null>(null);\n\n  const stateRef = useRef<SliderState>(null);\n  stateRef.current = state;\n  const reverseX = isReversed || direction === 'rtl';\n\n  const currentPosition = useRef<number>(null);\n  const { moveProps } = useMove({\n    onMoveStart() {\n      currentPosition.current = null;\n    },\n    onMove({ deltaX, deltaY }) {\n      let size = isVertical ? trackLayout.height : trackLayout.width;\n\n      if (currentPosition.current == null) {\n        currentPosition.current =\n          stateRef.current.getThumbPercent(realTimeTrackDraggingIndex.current) *\n          size;\n      }\n\n      let delta = isVertical ? deltaY : deltaX;\n      if (reverseX) {\n        if (!isVertical) {\n          delta = -delta;\n        }\n      } else {\n        if (isVertical) {\n          delta = -delta;\n        }\n      }\n\n      currentPosition.current += delta;\n\n      if (realTimeTrackDraggingIndex.current != null) {\n        const percent = clamp(currentPosition.current / size, 0, 1);\n        stateRef.current.setThumbPercent(\n          realTimeTrackDraggingIndex.current,\n          percent\n        );\n      }\n    },\n    onMoveEnd() {\n      if (realTimeTrackDraggingIndex.current != null) {\n        stateRef.current.setThumbDragging(\n          realTimeTrackDraggingIndex.current,\n          false\n        );\n        realTimeTrackDraggingIndex.current = null;\n      }\n    },\n  });\n\n  let currentPointer = useRef<number | null | undefined>(undefined);\n  let onDownTrack = (\n    e: React.UIEvent,\n    id: number,\n    clientX: number,\n    clientY: number\n  ) => {\n    // We only trigger track-dragging if the user clicks on the track itself and nothing is currently being dragged.\n    if (\n      !props.isDisabled &&\n      state.values.every((_, i) => !state.isThumbDragging(i))\n    ) {\n      let size = isVertical ? trackLayout.height : trackLayout.width;\n      // Find the closest thumb\n      const trackPosition = trackLayout[isVertical ? 'top' : 'left'];\n      const clickPosition = isVertical ? clientY : clientX;\n      const offset = clickPosition - trackPosition;\n      let percent = offset / size;\n      if (reverseX) {\n        if (!isVertical) {\n          percent = 1 - percent;\n        }\n      } else {\n        if (isVertical) {\n          percent = 1 - percent;\n        }\n      }\n      let value = state.getPercentValue(percent);\n\n      // to find the closet thumb we split the array based on the first thumb position to the \"right/end\" of the click.\n      let closestThumb;\n      let split = state.values.findIndex((v) => value - v < 0);\n      if (split === 0) {\n        // If the index is zero then the closetThumb is the first one\n        closestThumb = split;\n      } else if (split === -1) {\n        // If no index is found they've clicked past all the thumbs\n        closestThumb = state.values.length - 1;\n      } else {\n        let lastLeft = state.values[split - 1];\n        let firstRight = state.values[split];\n        // Pick the last left/start thumb, unless they are stacked on top of each other, then pick the right/end one\n        if (Math.abs(lastLeft - value) < Math.abs(firstRight - value)) {\n          closestThumb = split - 1;\n        } else {\n          closestThumb = split;\n        }\n      }\n\n      // Confirm that the found closest thumb is editable, not disabled, and move it\n      if (closestThumb >= 0 && state.isThumbEditable(closestThumb)) {\n        // Don't unfocus anything\n        e.preventDefault();\n\n        realTimeTrackDraggingIndex.current = closestThumb;\n        state.setFocusedThumb(closestThumb);\n        currentPointer.current = id;\n\n        state.setThumbDragging(realTimeTrackDraggingIndex.current, true);\n        state.setThumbValue(closestThumb, value);\n\n        addGlobalListener(window, 'mouseup', onUpTrack, false);\n        addGlobalListener(window, 'touchend', onUpTrack, false);\n        addGlobalListener(window, 'pointerup', onUpTrack, false);\n      } else {\n        realTimeTrackDraggingIndex.current = null;\n      }\n    }\n  };\n\n  let onUpTrack = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (id === currentPointer.current) {\n      if (realTimeTrackDraggingIndex.current != null) {\n        state.setThumbDragging(realTimeTrackDraggingIndex.current, false);\n        realTimeTrackDraggingIndex.current = null;\n      }\n\n      removeGlobalListener(window, 'mouseup', onUpTrack, false);\n      removeGlobalListener(window, 'touchend', onUpTrack, false);\n      removeGlobalListener(window, 'pointerup', onUpTrack, false);\n    }\n  };\n\n  if (labelProps.htmlFor) {\n    // Ideally the `for` attribute should point to the first thumb, but VoiceOver on iOS\n    // causes this to override the `aria-labelledby` on the thumb. This causes the first\n    // thumb to only be announced as the slider label rather than its individual name as well.\n    // See https://bugs.webkit.org/show_bug.cgi?id=172464.\n    delete labelProps.htmlFor;\n    labelProps.onClick = () => {\n      // Safari does not focus <input type=\"range\"> elements when clicking on an associated <label>,\n      // so do it manually. In addition, make sure we show the focus ring.\n      document.getElementById(getSliderThumbId(state, 0))?.focus();\n      setInteractionModality('keyboard');\n    };\n  }\n\n  return {\n    labelProps,\n    // The root element of the Slider will have role=\"group\" to group together\n    // all the thumb inputs in the Slider.  The label of the Slider will\n    // be used to label the group.\n    groupProps: {\n      role: 'group',\n      ...fieldProps,\n    },\n    trackProps: mergeProps(\n      {\n        onMouseDown(e: React.MouseEvent<HTMLElement>) {\n          if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n            return;\n          }\n          onDownTrack(e, undefined, e.clientX, e.clientY);\n        },\n        onPointerDown(e: React.PointerEvent<HTMLElement>) {\n          if (\n            e.pointerType === 'mouse' &&\n            (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)\n          ) {\n            return;\n          }\n          onDownTrack(e, e.pointerId, e.clientX, e.clientY);\n        },\n        onTouchStart(e: React.TouchEvent<HTMLElement>) {\n          onDownTrack(\n            e,\n            e.changedTouches[0].identifier,\n            e.changedTouches[0].clientX,\n            e.changedTouches[0].clientY\n          );\n        },\n      },\n      moveProps\n    ),\n    outputProps: {\n      'htmlFor': state.values\n        .map((_, index) => getSliderThumbId(state, index))\n        .join(' '),\n      'aria-live': 'off',\n    },\n  };\n}\n\nexport const useSlider = (\n  props: any,\n  state: any,\n  ref: any,\n  isReversed?: boolean\n) => {\n  let { groupProps: webGroupProps, ...rest } = useSliderWeb(\n    props,\n    state,\n    ref,\n    isReversed\n  );\n  let groupProps = mapDomPropsToRN(webGroupProps);\n  let labelProps = mapDomPropsToRN(rest.labelProps);\n  return { groupProps, ...rest, labelProps };\n};\n"]}

package/lib/module/useSliderThumb.js

@@ -11,7 +11,7 @@ import { isRTL } from '@react-native-aria/utils';
  * @param opts Options for this Slider thumb.
  * @param state Slider state, created via `useSliderState`.
  */
-export function useSliderThumb(opts, state) {
+export function useSliderThumb(opts, state, isReversed) {
   var _opts$ariaLabelledby;
 
   let {
@@ -31,7 +31,7 @@ export function useSliderThumb(opts, state) {
   });
   const stateRef = useRef(null);
   stateRef.current = state;
-  let reverseX = direction === 'rtl';
+  let reverseX = isReversed || direction === 'rtl';
   let currentPosition = useRef(null);
   let {
     moveProps
@@ -53,8 +53,14 @@ export function useSliderThumb(opts, state) {
 
       let delta = isVertical ? deltaY : deltaX;
 
-      if (isVertical || reverseX) {
-        delta = -delta;
+      if (reverseX) {
+        if (!isVertical) {
+          delta = -delta;
+        }
+      } else {
+        if (isVertical) {
+          delta = -delta;
+        }
       }
 
       currentPosition.current += delta;

package/lib/module/useSliderThumb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSliderThumb.ts"],"names":["clamp","getSliderThumbId","sliderIds","useRef","useLabel","useMove","isRTL","useSliderThumb","opts","state","index","isDisabled","trackLayout","isVertical","orientation","direction","undefined","labelId","get","labelProps","fieldProps","trim","stateRef","current","reverseX","currentPosition","moveProps","onMoveStart","setThumbDragging","onMove","deltaX","deltaY","size","height","width","getThumbPercent","delta","setThumbPercent","onMoveEnd","setThumbEditable","onAccessibilityAction","event","max","getThumbMinValue","min","getThumbMaxValue","value","getThumbValue","incrementValue","Math","step","decrementValue","nativeEvent","actionName","setThumbValue","inputProps","disabled","accessibilityRole","accessibilityValue","now","accessibilityActions","name","label","thumbProps"],"mappings":"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","sourcesContent":["import { AriaSliderThumbProps } from '@react-types/slider';\nimport { clamp } from '@react-aria/utils';\nimport { getSliderThumbId, sliderIds } from './utils';\nimport { useRef } from 'react';\nimport { SliderState } from '@react-stately/slider';\nimport { useLabel } from '@react-aria/label';\nimport { useMove } from './useMove';\nimport { isRTL } from '@react-native-aria/utils';\n\ninterface SliderThumbAria {\n  /** Props for the root thumb element; handles the dragging motion. */\n  thumbProps: any;\n\n  /** Props for the visually hidden range input element. */\n  inputProps: any;\n\n  /** Props for the label element for this thumb (optional). */\n  labelProps: any;\n}\n\ninterface SliderThumbOptions extends AriaSliderThumbProps {\n  /** A ref to the track element. */\n  trackLayout: any;\n  /** A ref to the thumb input element. */\n  inputRef: any;\n}\n\n/**\n * Provides behavior and accessibility for a thumb of a slider component.\n *\n * @param opts Options for this Slider thumb.\n * @param state Slider state, created via `useSliderState`.\n */\nexport function useSliderThumb(\n  opts: SliderThumbOptions,\n  state: SliderState\n): SliderThumbAria {\n  let { index, isDisabled, trackLayout } = opts;\n\n  let isVertical = opts.orientation === 'vertical';\n  const direction = isRTL() ? 'rtl' : undefined;\n\n  let labelId = sliderIds.get(state);\n  const { labelProps, fieldProps } = useLabel({\n    ...opts,\n    'id': getSliderThumbId(state, index),\n    'aria-labelledby': `${labelId} ${opts['aria-labelledby'] ?? ''}`.trim(),\n  });\n\n  const stateRef = useRef<SliderState>(null);\n  stateRef.current = state;\n  let reverseX = direction === 'rtl';\n  let currentPosition = useRef<number>(null);\n  let { moveProps } = useMove({\n    onMoveStart() {\n      currentPosition.current = null;\n      state.setThumbDragging(index, true);\n    },\n    onMove({ deltaX, deltaY }) {\n      let size = isVertical ? trackLayout.height : trackLayout.width;\n\n      if (currentPosition.current == null) {\n        currentPosition.current =\n          stateRef.current.getThumbPercent(index) * size;\n      }\n\n      let delta = isVertical ? deltaY : deltaX;\n      if (isVertical || reverseX) {\n        delta = -delta;\n      }\n      currentPosition.current += delta;\n      stateRef.current.setThumbPercent(\n        index,\n        clamp(currentPosition.current / size, 0, 1)\n      );\n    },\n    onMoveEnd() {\n      state.setThumbDragging(index, false);\n    },\n  });\n\n  state.setThumbEditable(index, !isDisabled);\n\n  const onAccessibilityAction = (event: any) => {\n    const max = state.getThumbMinValue(index);\n    const min = state.getThumbMaxValue(index);\n    const value = state.getThumbValue(index);\n\n    const incrementValue = Math.min(value + state.step ?? 1, max);\n    const decrementValue = Math.max(value - state.step ?? 1, min);\n\n    switch (event.nativeEvent.actionName) {\n      case 'increment':\n        state.setThumbValue(index, incrementValue);\n        break;\n      case 'decrement':\n        state.setThumbValue(index, decrementValue);\n        break;\n      default:\n        break;\n    }\n  };\n\n  return {\n    inputProps: {\n      ...fieldProps,\n      disabled: isDisabled,\n      accessibilityRole: 'adjustable',\n      accessibilityValue: {\n        min: state.getThumbMinValue(index),\n        max: state.getThumbMaxValue(index),\n        now: state.getThumbValue(index),\n      },\n      accessibilityActions: [\n        {\n          name: 'increment',\n          label: 'Increment',\n        },\n        {\n          name: 'decrement',\n          label: 'Decrement',\n        },\n      ],\n      onAccessibilityAction,\n    },\n    thumbProps: !isDisabled ? moveProps : {},\n    labelProps,\n  };\n}\n"]}
+{"version":3,"sources":["useSliderThumb.ts"],"names":["clamp","getSliderThumbId","sliderIds","useRef","useLabel","useMove","isRTL","useSliderThumb","opts","state","isReversed","index","isDisabled","trackLayout","isVertical","orientation","direction","undefined","labelId","get","labelProps","fieldProps","trim","stateRef","current","reverseX","currentPosition","moveProps","onMoveStart","setThumbDragging","onMove","deltaX","deltaY","size","height","width","getThumbPercent","delta","setThumbPercent","onMoveEnd","setThumbEditable","onAccessibilityAction","event","max","getThumbMinValue","min","getThumbMaxValue","value","getThumbValue","incrementValue","Math","step","decrementValue","nativeEvent","actionName","setThumbValue","inputProps","disabled","accessibilityRole","accessibilityValue","now","accessibilityActions","name","label","thumbProps"],"mappings":"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","sourcesContent":["import { AriaSliderThumbProps } from '@react-types/slider';\nimport { clamp } from '@react-aria/utils';\nimport { getSliderThumbId, sliderIds } from './utils';\nimport { useRef } from 'react';\nimport { SliderState } from '@react-stately/slider';\nimport { useLabel } from '@react-aria/label';\nimport { useMove } from './useMove';\nimport { isRTL } from '@react-native-aria/utils';\n\ninterface SliderThumbAria {\n  /** Props for the root thumb element; handles the dragging motion. */\n  thumbProps: any;\n\n  /** Props for the visually hidden range input element. */\n  inputProps: any;\n\n  /** Props for the label element for this thumb (optional). */\n  labelProps: any;\n}\n\ninterface SliderThumbOptions extends AriaSliderThumbProps {\n  /** A ref to the track element. */\n  trackLayout: any;\n  /** A ref to the thumb input element. */\n  inputRef: any;\n}\n\n/**\n * Provides behavior and accessibility for a thumb of a slider component.\n *\n * @param opts Options for this Slider thumb.\n * @param state Slider state, created via `useSliderState`.\n */\nexport function useSliderThumb(\n  opts: SliderThumbOptions,\n  state: SliderState,\n  isReversed?: boolean\n): SliderThumbAria {\n  let { index, isDisabled, trackLayout } = opts;\n\n  let isVertical = opts.orientation === 'vertical';\n  const direction = isRTL() ? 'rtl' : undefined;\n\n  let labelId = sliderIds.get(state);\n  const { labelProps, fieldProps } = useLabel({\n    ...opts,\n    'id': getSliderThumbId(state, index),\n    'aria-labelledby': `${labelId} ${opts['aria-labelledby'] ?? ''}`.trim(),\n  });\n\n  const stateRef = useRef<SliderState>(null);\n  stateRef.current = state;\n  let reverseX = isReversed || direction === 'rtl';\n  let currentPosition = useRef<number>(null);\n  let { moveProps } = useMove({\n    onMoveStart() {\n      currentPosition.current = null;\n      state.setThumbDragging(index, true);\n    },\n    onMove({ deltaX, deltaY }) {\n      let size = isVertical ? trackLayout.height : trackLayout.width;\n\n      if (currentPosition.current == null) {\n        currentPosition.current =\n          stateRef.current.getThumbPercent(index) * size;\n      }\n\n      let delta = isVertical ? deltaY : deltaX;\n      if (reverseX) {\n        if (!isVertical) {\n          delta = -delta;\n        }\n      } else {\n        if (isVertical) {\n          delta = -delta;\n        }\n      }\n      currentPosition.current += delta;\n      stateRef.current.setThumbPercent(\n        index,\n        clamp(currentPosition.current / size, 0, 1)\n      );\n    },\n    onMoveEnd() {\n      state.setThumbDragging(index, false);\n    },\n  });\n\n  state.setThumbEditable(index, !isDisabled);\n\n  const onAccessibilityAction = (event: any) => {\n    const max = state.getThumbMinValue(index);\n    const min = state.getThumbMaxValue(index);\n    const value = state.getThumbValue(index);\n\n    const incrementValue = Math.min(value + state.step ?? 1, max);\n    const decrementValue = Math.max(value - state.step ?? 1, min);\n\n    switch (event.nativeEvent.actionName) {\n      case 'increment':\n        state.setThumbValue(index, incrementValue);\n        break;\n      case 'decrement':\n        state.setThumbValue(index, decrementValue);\n        break;\n      default:\n        break;\n    }\n  };\n\n  return {\n    inputProps: {\n      ...fieldProps,\n      disabled: isDisabled,\n      accessibilityRole: 'adjustable',\n      accessibilityValue: {\n        min: state.getThumbMinValue(index),\n        max: state.getThumbMaxValue(index),\n        now: state.getThumbValue(index),\n      },\n      accessibilityActions: [\n        {\n          name: 'increment',\n          label: 'Increment',\n        },\n        {\n          name: 'decrement',\n          label: 'Decrement',\n        },\n      ],\n      onAccessibilityAction,\n    },\n    thumbProps: !isDisabled ? moveProps : {},\n    labelProps,\n  };\n}\n"]}

package/lib/module/useSliderThumb.web.js

@@ -12,7 +12,7 @@ import { isRTL } from '@react-native-aria/utils';
  * @param opts Options for this Slider thumb.
  * @param state Slider state, created via `useSliderState`.
  */
-export function useSliderThumb(opts, state) {
+export function useSliderThumb(opts, state, isReversed) {
   var _opts$ariaLabelledby;
 
   let {
@@ -51,7 +51,7 @@ export function useSliderThumb(opts, state) {
   }, [isFocused, focusInput]);
   const stateRef = useRef(null);
   stateRef.current = state;
-  let reverseX = direction === 'rtl';
+  let reverseX = isReversed || direction === 'rtl';
   let currentPosition = useRef(null);
   let {
     moveProps
@@ -74,14 +74,20 @@ export function useSliderThumb(opts, state) {
 
       if (pointerType === 'keyboard') {
         // (invert left/right according to language direction) + (according to vertical)
-        let delta = ((reverseX ? -deltaX : deltaX) + (isVertical ? -deltaY : -deltaY)) * stateRef.current.step;
+        let delta = ((reverseX ? -deltaX : deltaX) + (reverseX ? deltaY : -deltaY)) * stateRef.current.step;
         currentPosition.current += delta * size;
         stateRef.current.setThumbValue(index, stateRef.current.getThumbValue(index) + delta);
       } else {
         let delta = isVertical ? deltaY : deltaX;
 
-        if (isVertical || reverseX) {
-          delta = -delta;
+        if (reverseX) {
+          if (!isVertical) {
+            delta = -delta;
+          }
+        } else {
+          if (isVertical) {
+            delta = -delta;
+          }
         }
 
         currentPosition.current += delta;

package/lib/module/useSliderThumb.web.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSliderThumb.web.ts"],"names":["clamp","focusWithoutScrolling","mergeProps","useGlobalListeners","getSliderThumbId","sliderIds","useCallback","useEffect","useRef","useFocusable","useLabel","useMove","isRTL","useSliderThumb","opts","state","index","isRequired","isDisabled","validationState","trackLayout","inputRef","isVertical","orientation","direction","undefined","addGlobalListener","removeGlobalListener","labelId","get","labelProps","fieldProps","trim","value","values","focusInput","current","isFocused","focusedThumb","stateRef","reverseX","currentPosition","moveProps","onMoveStart","setThumbDragging","onMove","deltaX","deltaY","pointerType","size","height","width","getThumbPercent","delta","step","setThumbValue","getThumbValue","setThumbPercent","onMoveEnd","setThumbEditable","focusableProps","onFocus","setFocusedThumb","onBlur","currentPointer","onDown","id","window","onUp","e","pointerId","changedTouches","identifier","inputProps","getThumbMinValue","getThumbMaxValue","getThumbValueLabel","parseFloat","target","thumbProps","onMouseDown","button","altKey","ctrlKey","metaKey","onPointerDown","onTouchStart"],"mappings":"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","sourcesContent":["import { AriaSliderThumbProps } from '@react-types/slider';\nimport {\n  clamp,\n  focusWithoutScrolling,\n  mergeProps,\n  useGlobalListeners,\n} from '@react-aria/utils';\nimport { getSliderThumbId, sliderIds } from './utils';\nimport React, {\n  ChangeEvent,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  LabelHTMLAttributes,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\nimport { SliderState } from '@react-stately/slider';\nimport { useFocusable } from '@react-aria/focus';\nimport { useLabel } from '@react-aria/label';\nimport { useMove } from './useMove';\nimport { isRTL } from '@react-native-aria/utils';\n\ninterface SliderThumbAria {\n  /** Props for the root thumb element; handles the dragging motion. */\n  thumbProps: HTMLAttributes<HTMLElement>;\n\n  /** Props for the visually hidden range input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>;\n\n  /** Props for the label element for this thumb (optional). */\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>;\n}\n\ninterface SliderThumbOptions extends AriaSliderThumbProps {\n  /** A ref to the track element. */\n  trackLayout: any;\n  /** A ref to the thumb input element. */\n  inputRef: RefObject<HTMLInputElement>;\n}\n\n/**\n * Provides behavior and accessibility for a thumb of a slider component.\n *\n * @param opts Options for this Slider thumb.\n * @param state Slider state, created via `useSliderState`.\n */\nexport function useSliderThumb(\n  opts: SliderThumbOptions,\n  state: SliderState\n): SliderThumbAria {\n  let {\n    index,\n    isRequired,\n    isDisabled,\n    validationState,\n    trackLayout,\n    inputRef,\n  } = opts;\n\n  let isVertical = opts.orientation === 'vertical';\n\n  let direction = isRTL() ? 'rtl' : undefined;\n  let { addGlobalListener, removeGlobalListener } = useGlobalListeners();\n\n  let labelId = sliderIds.get(state);\n  const { labelProps, fieldProps } = useLabel({\n    ...opts,\n    'id': getSliderThumbId(state, index),\n    'aria-labelledby': `${labelId} ${opts['aria-labelledby'] ?? ''}`.trim(),\n  });\n\n  const value = state.values[index];\n\n  const focusInput = useCallback(() => {\n    if (inputRef.current) {\n      focusWithoutScrolling(inputRef.current);\n    }\n  }, [inputRef]);\n\n  const isFocused = state.focusedThumb === index;\n\n  useEffect(() => {\n    if (isFocused) {\n      focusInput();\n    }\n  }, [isFocused, focusInput]);\n\n  const stateRef = useRef<SliderState>(null);\n  stateRef.current = state;\n  let reverseX = direction === 'rtl';\n  let currentPosition = useRef<number>(null);\n  let { moveProps } = useMove({\n    onMoveStart() {\n      currentPosition.current = null;\n      state.setThumbDragging(index, true);\n    },\n    onMove({ deltaX, deltaY, pointerType }) {\n      let size = isVertical ? trackLayout.height : trackLayout.width;\n\n      if (currentPosition.current == null) {\n        currentPosition.current =\n          stateRef.current.getThumbPercent(index) * size;\n      }\n      if (pointerType === 'keyboard') {\n        // (invert left/right according to language direction) + (according to vertical)\n        let delta =\n          ((reverseX ? -deltaX : deltaX) + (isVertical ? -deltaY : -deltaY)) *\n          stateRef.current.step;\n        currentPosition.current += delta * size;\n        stateRef.current.setThumbValue(\n          index,\n          stateRef.current.getThumbValue(index) + delta\n        );\n      } else {\n        let delta = isVertical ? deltaY : deltaX;\n        if (isVertical || reverseX) {\n          delta = -delta;\n        }\n        currentPosition.current += delta;\n        stateRef.current.setThumbPercent(\n          index,\n          clamp(currentPosition.current / size, 0, 1)\n        );\n      }\n    },\n    onMoveEnd() {\n      state.setThumbDragging(index, false);\n    },\n  });\n\n  // Immediately register editability with the state\n  state.setThumbEditable(index, !isDisabled);\n\n  const { focusableProps } = useFocusable(\n    mergeProps(opts, {\n      onFocus: () => state.setFocusedThumb(index),\n      onBlur: () => state.setFocusedThumb(undefined),\n    }),\n    inputRef\n  );\n\n  let currentPointer = useRef<number | undefined>(undefined);\n  let onDown = (id?: number) => {\n    focusInput();\n    currentPointer.current = id;\n    state.setThumbDragging(index, true);\n\n    addGlobalListener(window, 'mouseup', onUp, false);\n    addGlobalListener(window, 'touchend', onUp, false);\n    addGlobalListener(window, 'pointerup', onUp, false);\n  };\n\n  let onUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (id === currentPointer.current) {\n      focusInput();\n      state.setThumbDragging(index, false);\n      removeGlobalListener(window, 'mouseup', onUp, false);\n      removeGlobalListener(window, 'touchend', onUp, false);\n      removeGlobalListener(window, 'pointerup', onUp, false);\n    }\n  };\n\n  // We install mouse handlers for the drag motion on the thumb div, but\n  // not the key handler for moving the thumb with the slider.  Instead,\n  // we focus the range input, and let the browser handle the keyboard\n  // interactions; we then listen to input's onChange to update state.\n  return {\n    inputProps: mergeProps(focusableProps, fieldProps, {\n      'type': 'range',\n      'tabIndex': !isDisabled ? 0 : undefined,\n      'min': state.getThumbMinValue(index),\n      'max': state.getThumbMaxValue(index),\n      'step': state.step,\n      'value': value,\n      'disabled': isDisabled,\n      'aria-orientation': opts.orientation,\n      'aria-valuetext': state.getThumbValueLabel(index),\n      'aria-required': isRequired || undefined,\n      'aria-invalid': validationState === 'invalid' || undefined,\n      'aria-errormessage': opts['aria-errormessage'],\n      'onChange': (e: ChangeEvent<HTMLInputElement>) => {\n        state.setThumbValue(index, parseFloat(e.target.value));\n      },\n    }),\n    thumbProps: !isDisabled\n      ? mergeProps(moveProps, {\n          onMouseDown: (e: React.MouseEvent<HTMLElement>) => {\n            if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n              return;\n            }\n            onDown();\n          },\n          onPointerDown: (e: React.PointerEvent<HTMLElement>) => {\n            if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n              return;\n            }\n            onDown(e.pointerId);\n          },\n          onTouchStart: (e: React.TouchEvent<HTMLElement>) => {\n            onDown(e.changedTouches[0].identifier);\n          },\n        })\n      : {},\n    labelProps,\n  };\n}\n"]}
+{"version":3,"sources":["useSliderThumb.web.ts"],"names":["clamp","focusWithoutScrolling","mergeProps","useGlobalListeners","getSliderThumbId","sliderIds","useCallback","useEffect","useRef","useFocusable","useLabel","useMove","isRTL","useSliderThumb","opts","state","isReversed","index","isRequired","isDisabled","validationState","trackLayout","inputRef","isVertical","orientation","direction","undefined","addGlobalListener","removeGlobalListener","labelId","get","labelProps","fieldProps","trim","value","values","focusInput","current","isFocused","focusedThumb","stateRef","reverseX","currentPosition","moveProps","onMoveStart","setThumbDragging","onMove","deltaX","deltaY","pointerType","size","height","width","getThumbPercent","delta","step","setThumbValue","getThumbValue","setThumbPercent","onMoveEnd","setThumbEditable","focusableProps","onFocus","setFocusedThumb","onBlur","currentPointer","onDown","id","window","onUp","e","pointerId","changedTouches","identifier","inputProps","getThumbMinValue","getThumbMaxValue","getThumbValueLabel","parseFloat","target","thumbProps","onMouseDown","button","altKey","ctrlKey","metaKey","onPointerDown","onTouchStart"],"mappings":"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","sourcesContent":["import { AriaSliderThumbProps } from '@react-types/slider';\nimport {\n  clamp,\n  focusWithoutScrolling,\n  mergeProps,\n  useGlobalListeners,\n} from '@react-aria/utils';\nimport { getSliderThumbId, sliderIds } from './utils';\nimport React, {\n  ChangeEvent,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  LabelHTMLAttributes,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\nimport { SliderState } from '@react-stately/slider';\nimport { useFocusable } from '@react-aria/focus';\nimport { useLabel } from '@react-aria/label';\nimport { useMove } from './useMove';\nimport { isRTL } from '@react-native-aria/utils';\n\ninterface SliderThumbAria {\n  /** Props for the root thumb element; handles the dragging motion. */\n  thumbProps: HTMLAttributes<HTMLElement>;\n\n  /** Props for the visually hidden range input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>;\n\n  /** Props for the label element for this thumb (optional). */\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>;\n}\n\ninterface SliderThumbOptions extends AriaSliderThumbProps {\n  /** A ref to the track element. */\n  trackLayout: any;\n  /** A ref to the thumb input element. */\n  inputRef: RefObject<HTMLInputElement>;\n}\n\n/**\n * Provides behavior and accessibility for a thumb of a slider component.\n *\n * @param opts Options for this Slider thumb.\n * @param state Slider state, created via `useSliderState`.\n */\nexport function useSliderThumb(\n  opts: SliderThumbOptions,\n  state: SliderState,\n  isReversed?: boolean\n): SliderThumbAria {\n  let {\n    index,\n    isRequired,\n    isDisabled,\n    validationState,\n    trackLayout,\n    inputRef,\n  } = opts;\n\n  let isVertical = opts.orientation === 'vertical';\n\n  let direction = isRTL() ? 'rtl' : undefined;\n  let { addGlobalListener, removeGlobalListener } = useGlobalListeners();\n\n  let labelId = sliderIds.get(state);\n  const { labelProps, fieldProps } = useLabel({\n    ...opts,\n    'id': getSliderThumbId(state, index),\n    'aria-labelledby': `${labelId} ${opts['aria-labelledby'] ?? ''}`.trim(),\n  });\n\n  const value = state.values[index];\n\n  const focusInput = useCallback(() => {\n    if (inputRef.current) {\n      focusWithoutScrolling(inputRef.current);\n    }\n  }, [inputRef]);\n\n  const isFocused = state.focusedThumb === index;\n\n  useEffect(() => {\n    if (isFocused) {\n      focusInput();\n    }\n  }, [isFocused, focusInput]);\n\n  const stateRef = useRef<SliderState>(null);\n  stateRef.current = state;\n  let reverseX = isReversed || direction === 'rtl';\n  let currentPosition = useRef<number>(null);\n  let { moveProps } = useMove({\n    onMoveStart() {\n      currentPosition.current = null;\n      state.setThumbDragging(index, true);\n    },\n    onMove({ deltaX, deltaY, pointerType }) {\n      let size = isVertical ? trackLayout.height : trackLayout.width;\n\n      if (currentPosition.current == null) {\n        currentPosition.current =\n          stateRef.current.getThumbPercent(index) * size;\n      }\n      if (pointerType === 'keyboard') {\n        // (invert left/right according to language direction) + (according to vertical)\n        let delta =\n          ((reverseX ? -deltaX : deltaX) + (reverseX ? deltaY : -deltaY)) *\n          stateRef.current.step;\n        currentPosition.current += delta * size;\n        stateRef.current.setThumbValue(\n          index,\n          stateRef.current.getThumbValue(index) + delta\n        );\n      } else {\n        let delta = isVertical ? deltaY : deltaX;\n        if (reverseX) {\n          if (!isVertical) {\n            delta = -delta;\n          }\n        } else {\n          if (isVertical) {\n            delta = -delta;\n          }\n        }\n        currentPosition.current += delta;\n        stateRef.current.setThumbPercent(\n          index,\n          clamp(currentPosition.current / size, 0, 1)\n        );\n      }\n    },\n    onMoveEnd() {\n      state.setThumbDragging(index, false);\n    },\n  });\n\n  // Immediately register editability with the state\n  state.setThumbEditable(index, !isDisabled);\n\n  const { focusableProps } = useFocusable(\n    mergeProps(opts, {\n      onFocus: () => state.setFocusedThumb(index),\n      onBlur: () => state.setFocusedThumb(undefined),\n    }),\n    inputRef\n  );\n\n  let currentPointer = useRef<number | undefined>(undefined);\n  let onDown = (id?: number) => {\n    focusInput();\n    currentPointer.current = id;\n    state.setThumbDragging(index, true);\n\n    addGlobalListener(window, 'mouseup', onUp, false);\n    addGlobalListener(window, 'touchend', onUp, false);\n    addGlobalListener(window, 'pointerup', onUp, false);\n  };\n\n  let onUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (id === currentPointer.current) {\n      focusInput();\n      state.setThumbDragging(index, false);\n      removeGlobalListener(window, 'mouseup', onUp, false);\n      removeGlobalListener(window, 'touchend', onUp, false);\n      removeGlobalListener(window, 'pointerup', onUp, false);\n    }\n  };\n\n  // We install mouse handlers for the drag motion on the thumb div, but\n  // not the key handler for moving the thumb with the slider.  Instead,\n  // we focus the range input, and let the browser handle the keyboard\n  // interactions; we then listen to input's onChange to update state.\n  return {\n    inputProps: mergeProps(focusableProps, fieldProps, {\n      'type': 'range',\n      'tabIndex': !isDisabled ? 0 : undefined,\n      'min': state.getThumbMinValue(index),\n      'max': state.getThumbMaxValue(index),\n      'step': state.step,\n      'value': value,\n      'disabled': isDisabled,\n      'aria-orientation': opts.orientation,\n      'aria-valuetext': state.getThumbValueLabel(index),\n      'aria-required': isRequired || undefined,\n      'aria-invalid': validationState === 'invalid' || undefined,\n      'aria-errormessage': opts['aria-errormessage'],\n      'onChange': (e: ChangeEvent<HTMLInputElement>) => {\n        state.setThumbValue(index, parseFloat(e.target.value));\n      },\n    }),\n    thumbProps: !isDisabled\n      ? mergeProps(moveProps, {\n          onMouseDown: (e: React.MouseEvent<HTMLElement>) => {\n            if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n              return;\n            }\n            onDown();\n          },\n          onPointerDown: (e: React.PointerEvent<HTMLElement>) => {\n            if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n              return;\n            }\n            onDown(e.pointerId);\n          },\n          onTouchStart: (e: React.TouchEvent<HTMLElement>) => {\n            onDown(e.changedTouches[0].identifier);\n          },\n        })\n      : {},\n    labelProps,\n  };\n}\n"]}

package/lib/typescript/useSlider.d.ts

@@ -20,5 +20,5 @@ interface SliderAria {
  * accepts click and drag motions, so that the closest thumb will follow clicks and drags on
  * the track.
  */
-export declare function useSlider(props: AriaSliderProps, state: SliderState, trackLayout: any): SliderAria;
+export declare function useSlider(props: AriaSliderProps, state: SliderState, trackLayout: any, isReversed?: boolean): SliderAria;
 export {};

package/lib/typescript/useSlider.web.d.ts

@@ -1,4 +1,4 @@
-export declare const useSlider: (props: any, state: any, ref: any) => {
+export declare const useSlider: (props: any, state: any, ref: any, isReversed?: boolean) => {
     labelProps: any;
     /** Props for the track element. */
     trackProps: any;

package/lib/typescript/useSliderThumb.d.ts

@@ -20,5 +20,5 @@ interface SliderThumbOptions extends AriaSliderThumbProps {
  * @param opts Options for this Slider thumb.
  * @param state Slider state, created via `useSliderState`.
  */
-export declare function useSliderThumb(opts: SliderThumbOptions, state: SliderState): SliderThumbAria;
+export declare function useSliderThumb(opts: SliderThumbOptions, state: SliderState, isReversed?: boolean): SliderThumbAria;
 export {};

package/lib/typescript/useSliderThumb.web.d.ts

@@ -21,5 +21,5 @@ interface SliderThumbOptions extends AriaSliderThumbProps {
  * @param opts Options for this Slider thumb.
  * @param state Slider state, created via `useSliderState`.
  */
-export declare function useSliderThumb(opts: SliderThumbOptions, state: SliderState): SliderThumbAria;
+export declare function useSliderThumb(opts: SliderThumbOptions, state: SliderState, isReversed?: boolean): SliderThumbAria;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-aria/slider",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "useSlider - React Native Aria",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/useSlider.ts

@@ -32,7 +32,8 @@ interface SliderAria {
 export function useSlider(
   props: AriaSliderProps,
   state: SliderState,
-  trackLayout: any
+  trackLayout: any,
+  isReversed?: boolean
 ): SliderAria {
   let { labelProps, fieldProps } = useLabel(props);
 
@@ -48,6 +49,7 @@ export function useSlider(
     clientY: number
   ) => {
     const direction = isRTL() ? 'rtl' : undefined;
+    const reverseX = isReversed || direction === 'rtl';
     if (
       !props.isDisabled &&
       state.values.every((_, i) => !state.isThumbDragging(i))
@@ -58,8 +60,14 @@ export function useSlider(
       const clickPosition = isVertical ? clientY : clientX;
       const offset = clickPosition - trackPosition;
       let percent = offset / size;
-      if (direction === 'rtl' || isVertical) {
-        percent = 1 - percent;
+      if (reverseX) {
+        if (!isVertical) {
+          percent = 1 - percent;
+        }
+      } else {
+        if (isVertical) {
+          percent = 1 - percent;
+        }
       }
       let value = state.getPercentValue(percent);
       // to find the closet thumb we split the array based on the first thumb position to the "right/end" of the click.

package/src/useSlider.web.ts

@@ -32,7 +32,8 @@ function useSliderWeb(
     left: number;
     x: number;
     y: number;
-  }
+  },
+  isReversed?: boolean
 ): SliderAria {
   let { labelProps, fieldProps } = useLabel(props);
 
@@ -53,7 +54,8 @@ function useSliderWeb(
 
   const stateRef = useRef<SliderState>(null);
   stateRef.current = state;
-  const reverseX = direction === 'rtl';
+  const reverseX = isReversed || direction === 'rtl';
+
   const currentPosition = useRef<number>(null);
   const { moveProps } = useMove({
     onMoveStart() {
@@ -69,8 +71,14 @@ function useSliderWeb(
       }
 
       let delta = isVertical ? deltaY : deltaX;
-      if (isVertical || reverseX) {
-        delta = -delta;
+      if (reverseX) {
+        if (!isVertical) {
+          delta = -delta;
+        }
+      } else {
+        if (isVertical) {
+          delta = -delta;
+        }
       }
 
       currentPosition.current += delta;
@@ -112,8 +120,14 @@ function useSliderWeb(
       const clickPosition = isVertical ? clientY : clientX;
       const offset = clickPosition - trackPosition;
       let percent = offset / size;
-      if (direction === 'rtl' || isVertical) {
-        percent = 1 - percent;
+      if (reverseX) {
+        if (!isVertical) {
+          percent = 1 - percent;
+        }
+      } else {
+        if (isVertical) {
+          percent = 1 - percent;
+        }
       }
       let value = state.getPercentValue(percent);
 
@@ -232,8 +246,18 @@ function useSliderWeb(
   };
 }
 
-export const useSlider = (props: any, state: any, ref: any) => {
-  let { groupProps: webGroupProps, ...rest } = useSliderWeb(props, state, ref);
+export const useSlider = (
+  props: any,
+  state: any,
+  ref: any,
+  isReversed?: boolean
+) => {
+  let { groupProps: webGroupProps, ...rest } = useSliderWeb(
+    props,
+    state,
+    ref,
+    isReversed
+  );
   let groupProps = mapDomPropsToRN(webGroupProps);
   let labelProps = mapDomPropsToRN(rest.labelProps);
   return { groupProps, ...rest, labelProps };

package/src/useSliderThumb.ts

@@ -33,7 +33,8 @@ interface SliderThumbOptions extends AriaSliderThumbProps {
  */
 export function useSliderThumb(
   opts: SliderThumbOptions,
-  state: SliderState
+  state: SliderState,
+  isReversed?: boolean
 ): SliderThumbAria {
   let { index, isDisabled, trackLayout } = opts;
 
@@ -49,7 +50,7 @@ export function useSliderThumb(
 
   const stateRef = useRef<SliderState>(null);
   stateRef.current = state;
-  let reverseX = direction === 'rtl';
+  let reverseX = isReversed || direction === 'rtl';
   let currentPosition = useRef<number>(null);
   let { moveProps } = useMove({
     onMoveStart() {
@@ -65,8 +66,14 @@ export function useSliderThumb(
       }
 
       let delta = isVertical ? deltaY : deltaX;
-      if (isVertical || reverseX) {
-        delta = -delta;
+      if (reverseX) {
+        if (!isVertical) {
+          delta = -delta;
+        }
+      } else {
+        if (isVertical) {
+          delta = -delta;
+        }
       }
       currentPosition.current += delta;
       stateRef.current.setThumbPercent(

package/src/useSliderThumb.web.ts

@@ -48,7 +48,8 @@ interface SliderThumbOptions extends AriaSliderThumbProps {
  */
 export function useSliderThumb(
   opts: SliderThumbOptions,
-  state: SliderState
+  state: SliderState,
+  isReversed?: boolean
 ): SliderThumbAria {
   let {
     index,
@@ -89,7 +90,7 @@ export function useSliderThumb(
 
   const stateRef = useRef<SliderState>(null);
   stateRef.current = state;
-  let reverseX = direction === 'rtl';
+  let reverseX = isReversed || direction === 'rtl';
   let currentPosition = useRef<number>(null);
   let { moveProps } = useMove({
     onMoveStart() {
@@ -106,7 +107,7 @@ export function useSliderThumb(
       if (pointerType === 'keyboard') {
         // (invert left/right according to language direction) + (according to vertical)
         let delta =
-          ((reverseX ? -deltaX : deltaX) + (isVertical ? -deltaY : -deltaY)) *
+          ((reverseX ? -deltaX : deltaX) + (reverseX ? deltaY : -deltaY)) *
           stateRef.current.step;
         currentPosition.current += delta * size;
         stateRef.current.setThumbValue(
@@ -115,8 +116,14 @@ export function useSliderThumb(
         );
       } else {
         let delta = isVertical ? deltaY : deltaX;
-        if (isVertical || reverseX) {
-          delta = -delta;
+        if (reverseX) {
+          if (!isVertical) {
+            delta = -delta;
+          }
+        } else {
+          if (isVertical) {
+            delta = -delta;
+          }
         }
         currentPosition.current += delta;
         stateRef.current.setThumbPercent(