related-ui-components 2.6.0 → 2.6.1

package/lib/module/components/RangeSlider/RangeSlider.js

@@ -0,0 +1,209 @@
+"use strict";
+
+import React, { useCallback, useState } from "react";
+import { StyleSheet, View, Text } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
+import { useTheme } from "../../theme/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LABEL_HEIGHT = 26; // Default height for the label area above the thumb
+
+const RangeSlider = ({
+  // Core props
+  min,
+  max,
+  step = 1,
+  sliderWidth,
+  initialMinValue,
+  initialMaxValue,
+  onValueChange,
+  // Sizing props
+  thumbSize = 28,
+  railHeight = 6,
+  // Styling props
+  containerStyle,
+  railStyle,
+  activeRailStyle,
+  thumbStyle,
+  labelContainerStyle,
+  labelTextStyle
+}) => {
+  const {
+    theme
+  } = useTheme();
+  const styles = getStyles(theme, thumbSize, railHeight);
+
+  // State for labels, allowing them to have dynamic width
+  const [leftLabel, setLeftLabel] = useState(initialMinValue.toLocaleString());
+  const [rightLabel, setRightLabel] = useState(initialMaxValue.toLocaleString());
+
+  // --- Worklets for calculations ---
+  const valueToPosition = useCallback(value => {
+    "worklet";
+
+    return (value - min) / (max - min) * sliderWidth;
+  }, [min, max, sliderWidth]);
+  const positionToValue = useCallback(position => {
+    "worklet";
+
+    const rawValue = position / sliderWidth * (max - min) + min;
+    return Math.round(rawValue / step) * step;
+  }, [min, max, step, sliderWidth]);
+
+  // --- Shared Values for Animation ---
+  const leftPosition = useSharedValue(valueToPosition(initialMinValue));
+  const rightPosition = useSharedValue(valueToPosition(initialMaxValue));
+  const context = useSharedValue({
+    x: 0
+  });
+  const activeThumb = useSharedValue(null);
+
+  // --- Pan Gesture Handler ---
+  const panGesture = Gesture.Pan().onBegin(e => {
+    // Determine which thumb is closer to the touch point
+    const distToLeft = Math.abs(e.x - leftPosition.value);
+    const distToRight = Math.abs(e.x - rightPosition.value);
+    if (distToLeft <= distToRight) {
+      activeThumb.value = "left";
+      context.value = {
+        x: leftPosition.value
+      };
+    } else {
+      activeThumb.value = "right";
+      context.value = {
+        x: rightPosition.value
+      };
+    }
+  }).onUpdate(e => {
+    if (activeThumb.value === null) return;
+    const newPos = context.value.x + e.translationX;
+
+    // Update the correct thumb's position and label
+    if (activeThumb.value === "left") {
+      const clampedPos = Math.max(0, Math.min(newPos, rightPosition.value));
+      leftPosition.value = clampedPos;
+      runOnJS(setLeftLabel)(positionToValue(clampedPos).toLocaleString());
+    } else {
+      const clampedPos = Math.min(sliderWidth, Math.max(newPos, leftPosition.value));
+      rightPosition.value = clampedPos;
+      runOnJS(setRightLabel)(positionToValue(clampedPos).toLocaleString());
+    }
+  }).onEnd(() => {
+    if (activeThumb.value === null) return;
+    // Finalize values and call the onValueChange callback
+    const finalLeftValue = positionToValue(leftPosition.value);
+    const finalRightValue = positionToValue(rightPosition.value);
+    runOnJS(onValueChange)({
+      min: finalLeftValue,
+      max: finalRightValue
+    });
+    activeThumb.value = null;
+  });
+
+  // --- Animated Styles ---
+  const animatedLeftThumbStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: leftPosition.value
+    }]
+  }));
+  const animatedRightThumbStyle = useAnimatedStyle(() => ({
+    // Adjust position to account for the thumb's own width
+    transform: [{
+      translateX: rightPosition.value - thumbSize
+    }]
+  }));
+  const animatedActiveRailStyle = useAnimatedStyle(() => ({
+    left: leftPosition.value,
+    right: sliderWidth - rightPosition.value
+  }));
+  return /*#__PURE__*/_jsx(GestureDetector, {
+    gesture: panGesture,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [styles.container, {
+        width: sliderWidth
+      }, containerStyle],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.railContainer,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.rail, railStyle]
+        }), /*#__PURE__*/_jsx(Animated.View, {
+          style: [styles.activeRail, animatedActiveRailStyle, activeRailStyle]
+        })]
+      }), /*#__PURE__*/_jsxs(Animated.View, {
+        style: [styles.thumbContainer, animatedLeftThumbStyle],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.labelContainer, labelContainerStyle],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.labelText, labelTextStyle],
+            numberOfLines: 1,
+            children: leftLabel
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          style: [styles.thumb, thumbStyle]
+        })]
+      }), /*#__PURE__*/_jsxs(Animated.View, {
+        style: [styles.thumbContainer, animatedRightThumbStyle],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.labelContainer, labelContainerStyle],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.labelText, labelTextStyle],
+            numberOfLines: 1,
+            children: rightLabel
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          style: [styles.thumb, thumbStyle]
+        })]
+      })]
+    })
+  });
+};
+const getStyles = (theme, thumbSize, railHeight) => StyleSheet.create({
+  container: {
+    height: LABEL_HEIGHT + thumbSize,
+    justifyContent: "center"
+  },
+  railContainer: {
+    justifyContent: "center"
+  },
+  rail: {
+    height: railHeight,
+    borderRadius: railHeight / 2,
+    backgroundColor: theme.surfaceVariant
+  },
+  activeRail: {
+    height: railHeight,
+    backgroundColor: theme.primary,
+    position: "absolute"
+  },
+  thumbContainer: {
+    position: "absolute",
+    alignItems: "center",
+    // Center the thumb visually on its value point
+    transform: [{
+      translateX: -thumbSize / 2
+    }]
+  },
+  labelContainer: {
+    position: "absolute",
+    bottom: thumbSize + 4,
+    backgroundColor: theme.onBackground,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 4
+  },
+  labelText: {
+    color: theme.background,
+    fontSize: 14,
+    fontWeight: "bold"
+  },
+  thumb: {
+    width: thumbSize,
+    height: thumbSize,
+    borderRadius: thumbSize / 2,
+    backgroundColor: theme.background,
+    borderColor: theme.primary,
+    borderWidth: 5
+  }
+});
+export default RangeSlider;
+//# sourceMappingURL=RangeSlider.js.map

package/lib/module/components/RangeSlider/RangeSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useState","StyleSheet","View","Text","Gesture","GestureDetector","Animated","runOnJS","useAnimatedStyle","useSharedValue","useTheme","jsx","_jsx","jsxs","_jsxs","LABEL_HEIGHT","RangeSlider","min","max","step","sliderWidth","initialMinValue","initialMaxValue","onValueChange","thumbSize","railHeight","containerStyle","railStyle","activeRailStyle","thumbStyle","labelContainerStyle","labelTextStyle","theme","styles","getStyles","leftLabel","setLeftLabel","toLocaleString","rightLabel","setRightLabel","valueToPosition","value","positionToValue","position","rawValue","Math","round","leftPosition","rightPosition","context","x","activeThumb","panGesture","Pan","onBegin","e","distToLeft","abs","distToRight","onUpdate","newPos","translationX","clampedPos","onEnd","finalLeftValue","finalRightValue","animatedLeftThumbStyle","transform","translateX","animatedRightThumbStyle","animatedActiveRailStyle","left","right","gesture","children","style","container","width","railContainer","rail","activeRail","thumbContainer","labelContainer","labelText","numberOfLines","thumb","create","height","justifyContent","borderRadius","backgroundColor","surfaceVariant","primary","alignItems","bottom","onBackground","paddingHorizontal","paddingVertical","color","background","fontSize","fontWeight","borderColor","borderWidth"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/RangeSlider/RangeSlider.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/RangeSlider/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export { default as RangeSlider } from "./RangeSlider.js";
+export * from "./RangeSlider.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/RangeSlider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","RangeSlider"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/RangeSlider/index.ts"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,WAAW,QAAQ,kBAAe;AACtD,cAAc,kBAAe","ignoreList":[]}

package/lib/module/components/index.js

@@ -22,4 +22,5 @@ export * from "./CustomIcon/index.js";
 export * from "./CarouselCardStack/index.js";
 export * from "./TravelBooking/index.js";
 export * from "./DateRangePicker/index.js";
+export * from "./RangeSlider/index.js";
 //# sourceMappingURL=index.js.map

package/lib/module/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,iBAAQ;AACtB,cAAc,wBAAe;AAC7B,cAAe,mBAAU;AACzB,cAAc,mBAAU;AACxB,cAAc,sBAAa;AAC3B,cAAc,oBAAW;AACzB,cAAc,kBAAS;AACvB,cAAc,wBAAe;AAC7B,cAAc,kBAAS;AACvB,cAAc,6BAAoB;AAClC,cAAc,wBAAe;AAC7B,cAAc,0BAAiB;AAC/B,cAAc,kBAAS;AACvB,cAAc,sBAAa;AAC3B,cAAc,oBAAW;AACzB,cAAc,4BAAmB;AACjC,cAAc,mBAAU;AACxB,cAAc,qBAAY;AAC1B,cAAc,uBAAc;AAC5B,cAAc,8BAAqB;AACnC,cAAc,0BAAiB;AAC/B,cAAc,4BAAmB","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,iBAAQ;AACtB,cAAc,wBAAe;AAC7B,cAAe,mBAAU;AACzB,cAAc,mBAAU;AACxB,cAAc,sBAAa;AAC3B,cAAc,oBAAW;AACzB,cAAc,kBAAS;AACvB,cAAc,wBAAe;AAC7B,cAAc,kBAAS;AACvB,cAAc,6BAAoB;AAClC,cAAc,wBAAe;AAC7B,cAAc,0BAAiB;AAC/B,cAAc,kBAAS;AACvB,cAAc,sBAAa;AAC3B,cAAc,oBAAW;AACzB,cAAc,4BAAmB;AACjC,cAAc,mBAAU;AACxB,cAAc,qBAAY;AAC1B,cAAc,uBAAc;AAC5B,cAAc,8BAAqB;AACnC,cAAc,0BAAiB;AAC/B,cAAc,4BAAmB;AACjC,cAAc,wBAAe","ignoreList":[]}

package/lib/typescript/src/components/RangeSlider/RangeSlider.d.ts

@@ -0,0 +1,40 @@
+import React from "react";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+export interface RangeSliderProps {
+    /** The minimum value of the slider. */
+    min: number;
+    /** The maximum value of the slider. */
+    max: number;
+    /** The increment value for each step of the slider. */
+    step?: number;
+    /** The total width of the slider component in pixels. */
+    sliderWidth: number;
+    /** The initial value for the left (minimum) thumb. */
+    initialMinValue: number;
+    /** The initial value for the right (maximum) thumb. */
+    initialMaxValue: number;
+    /** Callback function triggered when the user releases a thumb, returning the new min and max values. */
+    onValueChange: (values: {
+        min: number;
+        max: number;
+    }) => void;
+    /** The diameter of the draggable thumb. */
+    thumbSize?: number;
+    /** The height of the slider rail. */
+    railHeight?: number;
+    /** Custom style for the main container. */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Custom style for the inactive part of the rail. */
+    railStyle?: StyleProp<ViewStyle>;
+    /** Custom style for the active (selected) part of the rail. */
+    activeRailStyle?: StyleProp<ViewStyle>;
+    /** Custom style for the thumbs. Overrides the default themed thumb. */
+    thumbStyle?: StyleProp<ViewStyle>;
+    /** Custom style for the container of the value labels. */
+    labelContainerStyle?: StyleProp<ViewStyle>;
+    /** Custom style for the text inside the labels. */
+    labelTextStyle?: StyleProp<TextStyle>;
+}
+declare const RangeSlider: React.FC<RangeSliderProps>;
+export default RangeSlider;
+//# sourceMappingURL=RangeSlider.d.ts.map

package/lib/typescript/src/components/RangeSlider/RangeSlider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../../../../src/components/RangeSlider/RangeSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,EAIL,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAWtB,MAAM,WAAW,gBAAgB;IAE/B,uCAAuC;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,WAAW,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,eAAe,EAAE,MAAM,CAAC;IACxB,uDAAuD;IACvD,eAAe,EAAE,MAAM,CAAC;IACxB,wGAAwG;IACxG,aAAa,EAAE,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAG9D,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,sDAAsD;IACtD,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,+DAA+D;IAC/D,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACvC,uEAAuE;IACvE,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,0DAA0D;IAC1D,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,mDAAmD;IACnD,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACvC;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAiJ3C,CAAC;AAkDF,eAAe,WAAW,CAAC"}

package/lib/typescript/src/components/RangeSlider/index.d.ts

@@ -0,0 +1,3 @@
+export { default as RangeSlider } from "./RangeSlider";
+export * from "./RangeSlider";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/RangeSlider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/RangeSlider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,cAAc,eAAe,CAAC"}

package/lib/typescript/src/components/index.d.ts

@@ -20,4 +20,5 @@ export * from "./CustomIcon";
 export * from "./CarouselCardStack";
 export * from "./TravelBooking";
 export * from "./DateRangePicker";
+export * from "./RangeSlider";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAe,UAAU,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAe,UAAU,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "related-ui-components",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "main": "./src/index.ts",
   "scripts": {
     "start": "expo start",

package/src/components/RangeSlider/RangeSlider.tsx

@@ -0,0 +1,253 @@
+import React, { useCallback, useState } from "react";
+import {
+  StyleSheet,
+  View,
+  Text,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+} from "react-native-reanimated";
+import { ThemeType, useTheme } from "../../theme";
+
+const LABEL_HEIGHT = 26; // Default height for the label area above the thumb
+
+export interface RangeSliderProps {
+  // --- Core Functionality ---
+  /** The minimum value of the slider. */
+  min: number;
+  /** The maximum value of the slider. */
+  max: number;
+  /** The increment value for each step of the slider. */
+  step?: number;
+  /** The total width of the slider component in pixels. */
+  sliderWidth: number;
+  /** The initial value for the left (minimum) thumb. */
+  initialMinValue: number;
+  /** The initial value for the right (maximum) thumb. */
+  initialMaxValue: number;
+  /** Callback function triggered when the user releases a thumb, returning the new min and max values. */
+  onValueChange: (values: { min: number; max: number }) => void;
+
+  // --- Sizing ---
+  /** The diameter of the draggable thumb. */
+  thumbSize?: number;
+  /** The height of the slider rail. */
+  railHeight?: number;
+
+  // --- Styling ---
+  /** Custom style for the main container. */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** Custom style for the inactive part of the rail. */
+  railStyle?: StyleProp<ViewStyle>;
+  /** Custom style for the active (selected) part of the rail. */
+  activeRailStyle?: StyleProp<ViewStyle>;
+  /** Custom style for the thumbs. Overrides the default themed thumb. */
+  thumbStyle?: StyleProp<ViewStyle>;
+  /** Custom style for the container of the value labels. */
+  labelContainerStyle?: StyleProp<ViewStyle>;
+  /** Custom style for the text inside the labels. */
+  labelTextStyle?: StyleProp<TextStyle>;
+}
+
+const RangeSlider: React.FC<RangeSliderProps> = ({
+  // Core props
+  min,
+  max,
+  step = 1,
+  sliderWidth,
+  initialMinValue,
+  initialMaxValue,
+  onValueChange,
+  // Sizing props
+  thumbSize = 28,
+  railHeight = 6,
+  // Styling props
+  containerStyle,
+  railStyle,
+  activeRailStyle,
+  thumbStyle,
+  labelContainerStyle,
+  labelTextStyle,
+}) => {
+  const { theme } = useTheme();
+  const styles = getStyles(theme, thumbSize, railHeight);
+
+  // State for labels, allowing them to have dynamic width
+  const [leftLabel, setLeftLabel] = useState(initialMinValue.toLocaleString());
+  const [rightLabel, setRightLabel] = useState(
+    initialMaxValue.toLocaleString()
+  );
+
+  // --- Worklets for calculations ---
+  const valueToPosition = useCallback(
+    (value: number) => {
+      "worklet";
+      return ((value - min) / (max - min)) * sliderWidth;
+    },
+    [min, max, sliderWidth]
+  );
+
+  const positionToValue = useCallback(
+    (position: number) => {
+      "worklet";
+      const rawValue = (position / sliderWidth) * (max - min) + min;
+      return Math.round(rawValue / step) * step;
+    },
+    [min, max, step, sliderWidth]
+  );
+
+  // --- Shared Values for Animation ---
+  const leftPosition = useSharedValue(valueToPosition(initialMinValue));
+  const rightPosition = useSharedValue(valueToPosition(initialMaxValue));
+  const context = useSharedValue({ x: 0 });
+  const activeThumb = useSharedValue<"left" | "right" | null>(null);
+
+  // --- Pan Gesture Handler ---
+  const panGesture = Gesture.Pan()
+    .onBegin((e) => {
+      // Determine which thumb is closer to the touch point
+      const distToLeft = Math.abs(e.x - leftPosition.value);
+      const distToRight = Math.abs(e.x - rightPosition.value);
+      if (distToLeft <= distToRight) {
+        activeThumb.value = "left";
+        context.value = { x: leftPosition.value };
+      } else {
+        activeThumb.value = "right";
+        context.value = { x: rightPosition.value };
+      }
+    })
+    .onUpdate((e) => {
+      if (activeThumb.value === null) return;
+      const newPos = context.value.x + e.translationX;
+
+      // Update the correct thumb's position and label
+      if (activeThumb.value === "left") {
+        const clampedPos = Math.max(0, Math.min(newPos, rightPosition.value));
+        leftPosition.value = clampedPos;
+        runOnJS(setLeftLabel)(positionToValue(clampedPos).toLocaleString());
+      } else {
+        const clampedPos = Math.min(
+          sliderWidth,
+          Math.max(newPos, leftPosition.value)
+        );
+        rightPosition.value = clampedPos;
+        runOnJS(setRightLabel)(positionToValue(clampedPos).toLocaleString());
+      }
+    })
+    .onEnd(() => {
+      if (activeThumb.value === null) return;
+      // Finalize values and call the onValueChange callback
+      const finalLeftValue = positionToValue(leftPosition.value);
+      const finalRightValue = positionToValue(rightPosition.value);
+      runOnJS(onValueChange)({ min: finalLeftValue, max: finalRightValue });
+      activeThumb.value = null;
+    });
+
+  // --- Animated Styles ---
+  const animatedLeftThumbStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: leftPosition.value }],
+  }));
+
+  const animatedRightThumbStyle = useAnimatedStyle(() => ({
+    // Adjust position to account for the thumb's own width
+    transform: [{ translateX: rightPosition.value - thumbSize }],
+  }));
+
+  const animatedActiveRailStyle = useAnimatedStyle(() => ({
+    left: leftPosition.value,
+    right: sliderWidth - rightPosition.value,
+  }));
+
+  return (
+    <GestureDetector gesture={panGesture}>
+      <View style={[styles.container, { width: sliderWidth }, containerStyle]}>
+        <View style={styles.railContainer}>
+          <View style={[styles.rail, railStyle]} />
+          <Animated.View
+            style={[
+              styles.activeRail,
+              animatedActiveRailStyle,
+              activeRailStyle,
+            ]}
+          />
+        </View>
+
+        {/* Left Thumb */}
+        <Animated.View style={[styles.thumbContainer, animatedLeftThumbStyle]}>
+          <View style={[styles.labelContainer, labelContainerStyle]}>
+            <Text style={[styles.labelText, labelTextStyle]} numberOfLines={1}>
+              {leftLabel}
+            </Text>
+          </View>
+          <View style={[styles.thumb, thumbStyle]} />
+        </Animated.View>
+
+        {/* Right Thumb */}
+        <Animated.View style={[styles.thumbContainer, animatedRightThumbStyle]}>
+          <View style={[styles.labelContainer, labelContainerStyle]}>
+            <Text style={[styles.labelText, labelTextStyle]} numberOfLines={1}>
+              {rightLabel}
+            </Text>
+          </View>
+          <View style={[styles.thumb, thumbStyle]} />
+        </Animated.View>
+      </View>
+    </GestureDetector>
+  );
+};
+
+const getStyles = (theme: ThemeType, thumbSize: number, railHeight: number) =>
+  StyleSheet.create({
+    container: {
+      height: LABEL_HEIGHT + thumbSize,
+      justifyContent: "center",
+    },
+    railContainer: {
+      justifyContent: "center",
+    },
+    rail: {
+      height: railHeight,
+      borderRadius: railHeight / 2,
+      backgroundColor: theme.surfaceVariant,
+    },
+    activeRail: {
+      height: railHeight,
+      backgroundColor: theme.primary,
+      position: "absolute",
+    },
+    thumbContainer: {
+      position: "absolute",
+      alignItems: "center",
+      // Center the thumb visually on its value point
+      transform: [{ translateX: -thumbSize / 2 }],
+    },
+    labelContainer: {
+      position: "absolute",
+      bottom: thumbSize + 4,
+      backgroundColor: theme.onBackground,
+      paddingHorizontal: 10,
+      paddingVertical: 4,
+      borderRadius: 4,
+    },
+    labelText: {
+      color: theme.background,
+      fontSize: 14,
+      fontWeight: "bold",
+    },
+    thumb: {
+      width: thumbSize,
+      height: thumbSize,
+      borderRadius: thumbSize / 2,
+      backgroundColor: theme.background,
+      borderColor: theme.primary,
+      borderWidth: 5,
+    },
+  });
+
+export default RangeSlider;

package/src/components/RangeSlider/index.ts

@@ -0,0 +1,2 @@
+export { default as RangeSlider } from "./RangeSlider";
+export * from "./RangeSlider";

package/src/components/index.ts

@@ -19,4 +19,5 @@ export * from "./Skeleton";
 export * from "./CustomIcon"
 export * from "./CarouselCardStack";
 export * from "./TravelBooking";
-export * from "./DateRangePicker";
+export * from "./DateRangePicker";
+export * from "./RangeSlider";