related-ui-components 3.3.0 → 3.3.1

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

@@ -4,10 +4,12 @@ import React, { useCallback, useMemo, useState } from "react";
 import { I18nManager, StyleSheet, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, { runOnJS, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
-import { SliderLabels } from "./SliderLabel.js";
 import { useTheme } from "../../theme/index.js";
+import { SliderLabels } from "./SliderLabel.js";
+import { Input } from "../Input/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const THUMB_SIZE = 28;
+const THUMB_RADIUS = THUMB_SIZE / 2;
 const RAIL_HEIGHT = 6;
 const LABEL_HEIGHT = 26;
 /**
@@ -16,13 +18,9 @@ const LABEL_HEIGHT = 26;
  */
 function createPercentileBreakpoints(data) {
   const sorted = [...new Set(data)].sort((a, b) => a - b);
-
-  // If small dataset, use all unique values
   if (sorted.length <= 100) {
     return sorted;
   }
-
-  // For larger datasets, sample at percentile intervals
   const breakpoints = [];
   const numBreakpoints = 100;
   for (let i = 0; i <= numBreakpoints; i++) {
@@ -63,7 +61,11 @@ const RangeSlider = ({
   onValueChange,
   theme,
   scale = "linear",
-  dataPoints
+  dataPoints,
+  showCustomInputs = false,
+  inputPlaceholders,
+  inputLabels,
+  isBottomSheet = false
 }) => {
   const {
     theme: defaultTheme
@@ -74,6 +76,13 @@ const RangeSlider = ({
   const [leftLabel, setLeftLabel] = useState(initialMinValue.toLocaleString());
   const [rightLabel, setRightLabel] = useState(initialMaxValue.toLocaleString());
 
+  // State for custom input fields
+  const [minInputValue, setMinInputValue] = useState(initialMinValue.toString());
+  const [maxInputValue, setMaxInputValue] = useState(initialMaxValue.toString());
+
+  // The effective track width (where thumb CENTER can travel)
+  const effectiveWidth = sliderWidth - THUMB_SIZE;
+
   // Pre-compute breakpoints for percentile scale
   const breakpoints = useMemo(() => {
     if (scale === "percentile" && dataPoints?.length) {
@@ -87,14 +96,12 @@ const RangeSlider = ({
 
     let percentage;
     if (scale === "percentile" && breakpoints.length > 1) {
-      // Find where this value falls in the breakpoints
       const index = findBreakpointIndex(breakpoints, value);
       if (index === 0) {
         percentage = 0;
       } else if (index >= breakpoints.length - 1) {
         percentage = 1;
       } else {
-        // Interpolate between breakpoints
         const lowerVal = breakpoints[index - 1];
         const upperVal = breakpoints[index];
         const lowerPct = (index - 1) / (breakpoints.length - 1);
@@ -114,16 +121,21 @@ const RangeSlider = ({
     } else {
       percentage = (value - min) / (max - min);
     }
-    return isRTL ? (1 - percentage) * sliderWidth : percentage * sliderWidth;
-  }, [min, max, safeMin, sliderWidth, isRTL, scale, breakpoints]);
+
+    // Map to effective width, offset by thumb radius
+    const position = percentage * effectiveWidth + THUMB_RADIUS;
+    return isRTL ? sliderWidth - position : position;
+  }, [min, max, safeMin, sliderWidth, effectiveWidth, isRTL, scale, breakpoints]);
   const positionToValue = useCallback(position => {
     "worklet";
 
-    const percentage = isRTL ? 1 - position / sliderWidth : position / sliderWidth;
+    // Convert position to percentage using effective width
+    const adjustedPosition = isRTL ? sliderWidth - position : position;
+    const percentage = (adjustedPosition - THUMB_RADIUS) / effectiveWidth;
+    const clampedPercentage = Math.max(0, Math.min(1, percentage));
     let rawValue;
     if (scale === "percentile" && breakpoints.length > 1) {
-      // Map percentage to breakpoint index
-      const exactIndex = percentage * (breakpoints.length - 1);
+      const exactIndex = clampedPercentage * (breakpoints.length - 1);
       const lowerIndex = Math.floor(exactIndex);
       const upperIndex = Math.min(lowerIndex + 1, breakpoints.length - 1);
       const ratio = exactIndex - lowerIndex;
@@ -131,12 +143,12 @@ const RangeSlider = ({
     } else if (scale === "logarithmic") {
       const logMin = Math.log(safeMin);
       const logMax = Math.log(max);
-      rawValue = Math.exp(logMin + percentage * (logMax - logMin));
+      rawValue = Math.exp(logMin + clampedPercentage * (logMax - logMin));
     } else {
-      rawValue = percentage * (max - min) + min;
+      rawValue = clampedPercentage * (max - min) + min;
     }
     return Math.round(rawValue / step) * step;
-  }, [min, max, safeMin, step, sliderWidth, isRTL, scale, breakpoints]);
+  }, [min, max, safeMin, step, sliderWidth, effectiveWidth, isRTL, scale, breakpoints]);
   const leftPosition = useSharedValue(valueToPosition(initialMinValue));
   const rightPosition = useSharedValue(valueToPosition(initialMaxValue));
   const context = useSharedValue({
@@ -161,17 +173,21 @@ const RangeSlider = ({
     if (activeThumb.value === null) return;
     const newPos = context.value.x + e.translationX;
     if (activeThumb.value === "left") {
-      const lowerBound = isRTL ? rightPosition.value + THUMB_SIZE : 0;
-      const upperBound = isRTL ? sliderWidth : rightPosition.value - THUMB_SIZE;
+      const lowerBound = isRTL ? rightPosition.value + THUMB_SIZE : THUMB_RADIUS;
+      const upperBound = isRTL ? sliderWidth - THUMB_RADIUS : rightPosition.value - THUMB_SIZE;
       const clampedPos = Math.max(Math.min(newPos, upperBound), lowerBound);
       leftPosition.value = clampedPos;
-      runOnJS(setLeftLabel)(positionToValue(clampedPos).toLocaleString());
+      const newValue = positionToValue(clampedPos);
+      runOnJS(setLeftLabel)(newValue.toLocaleString());
+      runOnJS(setMinInputValue)(newValue.toString());
     } else {
-      const lowerBound = isRTL ? 0 : leftPosition.value + THUMB_SIZE;
-      const upperBound = isRTL ? leftPosition.value - THUMB_SIZE : sliderWidth;
+      const lowerBound = isRTL ? THUMB_RADIUS : leftPosition.value + THUMB_SIZE;
+      const upperBound = isRTL ? leftPosition.value - THUMB_SIZE : sliderWidth - THUMB_RADIUS;
       const clampedPos = Math.max(Math.min(newPos, upperBound), lowerBound);
       rightPosition.value = clampedPos;
-      runOnJS(setRightLabel)(positionToValue(clampedPos).toLocaleString());
+      const newValue = positionToValue(clampedPos);
+      runOnJS(setRightLabel)(newValue.toLocaleString());
+      runOnJS(setMaxInputValue)(newValue.toString());
     }
   }).onEnd(() => {
     if (activeThumb.value === null) return;
@@ -183,14 +199,81 @@ const RangeSlider = ({
     });
     activeThumb.value = null;
   });
+
+  // Handlers for custom input fields
+  const handleMinInputChange = useCallback(text => {
+    // Allow only numeric input (with optional decimal)
+    const sanitized = text.replace(/[^0-9.]/g, "");
+    setMinInputValue(sanitized);
+  }, []);
+  const handleMaxInputChange = useCallback(text => {
+    const sanitized = text.replace(/[^0-9.]/g, "");
+    setMaxInputValue(sanitized);
+  }, []);
+  const handleMinInputSubmit = useCallback(() => {
+    const parsed = parseFloat(minInputValue);
+    if (isNaN(parsed)) {
+      // Reset to current slider value
+      const currentValue = positionToValue(leftPosition.value);
+      setMinInputValue(currentValue.toString());
+      return;
+    }
+
+    // Clamp value: must be >= min and <= current max value
+    const currentMaxValue = positionToValue(rightPosition.value);
+    const clampedValue = Math.max(min, Math.min(parsed, currentMaxValue - step));
+    const steppedValue = Math.round(clampedValue / step) * step;
+
+    // Update input display
+    setMinInputValue(steppedValue.toString());
+    setLeftLabel(steppedValue.toLocaleString());
+
+    // Update slider position
+    leftPosition.value = valueToPosition(steppedValue);
+
+    // Trigger callback
+    onValueChange({
+      min: steppedValue,
+      max: currentMaxValue
+    });
+  }, [minInputValue, min, step, leftPosition, rightPosition, positionToValue, valueToPosition, onValueChange]);
+  const handleMaxInputSubmit = useCallback(() => {
+    const parsed = parseFloat(maxInputValue);
+    if (isNaN(parsed)) {
+      // Reset to current slider value
+      const currentValue = positionToValue(rightPosition.value);
+      setMaxInputValue(currentValue.toString());
+      return;
+    }
+
+    // Clamp value: must be <= max and >= current min value
+    const currentMinValue = positionToValue(leftPosition.value);
+    const clampedValue = Math.min(max, Math.max(parsed, currentMinValue + step));
+    const steppedValue = Math.round(clampedValue / step) * step;
+
+    // Update input display
+    setMaxInputValue(steppedValue.toString());
+    setRightLabel(steppedValue.toLocaleString());
+
+    // Update slider position
+    rightPosition.value = valueToPosition(steppedValue);
+
+    // Trigger callback
+    onValueChange({
+      min: currentMinValue,
+      max: steppedValue
+    });
+  }, [maxInputValue, max, step, leftPosition, rightPosition, positionToValue, valueToPosition, onValueChange]);
+
+  // Thumb position = center of thumb, so offset by radius to get left edge
   const animatedLeftThumbStyle = useAnimatedStyle(() => ({
     transform: [{
-      translateX: leftPosition.value - (isRTL ? THUMB_SIZE : 0)
+      translateX: leftPosition.value - THUMB_RADIUS
     }]
   }));
   const animatedRightThumbStyle = useAnimatedStyle(() => ({
     transform: [{
-      translateX: rightPosition.value - (isRTL ? 0 : THUMB_SIZE)
+      translateX: rightPosition.value - THUMB_RADIUS
     }]
   }));
   const animatedActiveRailStyle = useAnimatedStyle(() => {
@@ -202,10 +285,41 @@ const RangeSlider = ({
     };
   });
   return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, {
+    style: [showCustomInputs ? styles.containerWithInputs : styles.container, {
       width: sliderWidth
     }],
-    children: [/*#__PURE__*/_jsx(SliderLabels, {
+    children: [showCustomInputs ? /*#__PURE__*/_jsxs(View, {
+      style: styles.inputsContainer,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.inputWrapper,
+        children: /*#__PURE__*/_jsx(Input, {
+          label: inputLabels?.min ?? "Min",
+          value: minInputValue,
+          onChangeText: handleMinInputChange,
+          onBlur: handleMinInputSubmit,
+          onSubmitEditing: handleMinInputSubmit,
+          keyboardType: "numeric",
+          placeholder: inputPlaceholders?.min,
+          placeholderTextColor: currTheme.surfaceVariant,
+          returnKeyType: "done",
+          isBottomSheet: isBottomSheet
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.inputWrapper,
+        children: /*#__PURE__*/_jsx(Input, {
+          label: inputLabels?.max ?? "Max",
+          value: maxInputValue,
+          onChangeText: handleMaxInputChange,
+          onBlur: handleMaxInputSubmit,
+          onSubmitEditing: handleMaxInputSubmit,
+          keyboardType: "numeric",
+          placeholder: inputPlaceholders?.max,
+          placeholderTextColor: currTheme.surfaceVariant,
+          returnKeyType: "done",
+          isBottomSheet: isBottomSheet
+        })
+      })]
+    }) : /*#__PURE__*/_jsx(SliderLabels, {
       leftValue: leftLabel,
       rightValue: rightLabel,
       leftPosition: leftPosition,
@@ -242,6 +356,9 @@ const getStyles = theme => StyleSheet.create({
     marginTop: LABEL_HEIGHT,
     direction: "ltr"
   },
+  containerWithInputs: {
+    direction: "ltr"
+  },
   railContainer: {
     justifyContent: "center",
     height: THUMB_SIZE
@@ -270,6 +387,34 @@ const getStyles = theme => StyleSheet.create({
     backgroundColor: theme.background,
     borderColor: theme.primary,
     borderWidth: 5
+  },
+  inputsContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    gap: 16,
+    marginBottom: 12,
+    direction: I18nManager.isRTL ? "rtl" : "ltr"
+  },
+  inputWrapper: {
+    flex: 1
+  },
+  inputLabel: {
+    color: theme.onSurface,
+    fontSize: 13,
+    fontFamily: "DinMedium",
+    marginBottom: 6
+  },
+  input: {
+    backgroundColor: theme.background,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: theme.surfaceVariant,
+    color: theme.onSurface,
+    fontSize: 15,
+    fontFamily: "DinBold",
+    textAlign: "center"
   }
 });
 export default RangeSlider;

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useMemo","useState","I18nManager","StyleSheet","View","Gesture","GestureDetector","Animated","runOnJS","useAnimatedStyle","useSharedValue","SliderLabels","useTheme","jsx","_jsx","jsxs","_jsxs","THUMB_SIZE","RAIL_HEIGHT","LABEL_HEIGHT","createPercentileBreakpoints","data","sorted","Set","sort","a","b","length","breakpoints","numBreakpoints","i","index","Math","floor","value","push","findBreakpointIndex","left","right","mid","RangeSlider","min","max","step","sliderWidth","initialMinValue","initialMaxValue","onValueChange","theme","scale","dataPoints","defaultTheme","currTheme","styles","getStyles","isRTL","leftLabel","setLeftLabel","toLocaleString","rightLabel","setRightLabel","safeMin","valueToPosition","percentage","lowerVal","upperVal","lowerPct","upperPct","ratio","logMin","log","logMax","logValue","positionToValue","position","rawValue","exactIndex","lowerIndex","upperIndex","exp","round","leftPosition","rightPosition","context","x","activeThumb","panGesture","Pan","onBegin","e","distToLeft","abs","distToRight","onUpdate","newPos","translationX","lowerBound","upperBound","clampedPos","onEnd","finalLeftValue","finalRightValue","animatedLeftThumbStyle","transform","translateX","animatedRightThumbStyle","animatedActiveRailStyle","start","end","style","container","width","children","leftValue","rightValue","thumbSize","gesture","railContainer","rail","activeRail","thumbContainer","thumb","create","height","justifyContent","marginTop","direction","borderRadius","backgroundColor","surface","primary","alignItems","background","borderColor","borderWidth"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/RangeSlider/RangeSlider.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useMemo","useState","I18nManager","StyleSheet","View","Gesture","GestureDetector","Animated","runOnJS","useAnimatedStyle","useSharedValue","useTheme","SliderLabels","Input","jsx","_jsx","jsxs","_jsxs","THUMB_SIZE","THUMB_RADIUS","RAIL_HEIGHT","LABEL_HEIGHT","createPercentileBreakpoints","data","sorted","Set","sort","a","b","length","breakpoints","numBreakpoints","i","index","Math","floor","value","push","findBreakpointIndex","left","right","mid","RangeSlider","min","max","step","sliderWidth","initialMinValue","initialMaxValue","onValueChange","theme","scale","dataPoints","showCustomInputs","inputPlaceholders","inputLabels","isBottomSheet","defaultTheme","currTheme","styles","getStyles","isRTL","leftLabel","setLeftLabel","toLocaleString","rightLabel","setRightLabel","minInputValue","setMinInputValue","toString","maxInputValue","setMaxInputValue","effectiveWidth","safeMin","valueToPosition","percentage","lowerVal","upperVal","lowerPct","upperPct","ratio","logMin","log","logMax","logValue","position","positionToValue","adjustedPosition","clampedPercentage","rawValue","exactIndex","lowerIndex","upperIndex","exp","round","leftPosition","rightPosition","context","x","activeThumb","panGesture","Pan","onBegin","e","distToLeft","abs","distToRight","onUpdate","newPos","translationX","lowerBound","upperBound","clampedPos","newValue","onEnd","finalLeftValue","finalRightValue","handleMinInputChange","text","sanitized","replace","handleMaxInputChange","handleMinInputSubmit","parsed","parseFloat","isNaN","currentValue","currentMaxValue","clampedValue","steppedValue","handleMaxInputSubmit","currentMinValue","animatedLeftThumbStyle","transform","translateX","animatedRightThumbStyle","animatedActiveRailStyle","start","end","style","containerWithInputs","container","width","children","inputsContainer","inputWrapper","label","onChangeText","onBlur","onSubmitEditing","keyboardType","placeholder","placeholderTextColor","surfaceVariant","returnKeyType","leftValue","rightValue","thumbSize","gesture","railContainer","rail","activeRail","thumbContainer","thumb","create","height","justifyContent","marginTop","direction","borderRadius","backgroundColor","surface","primary","alignItems","background","borderColor","borderWidth","flexDirection","gap","marginBottom","flex","inputLabel","color","onSurface","fontSize","fontFamily","input","paddingHorizontal","paddingVertical","textAlign"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/RangeSlider/RangeSlider.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -6,35 +6,71 @@ import Animated, { useAnimatedStyle, useDerivedValue, useSharedValue } from "rea
 import { useTheme } from "../../theme/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const LABEL_HEIGHT = 26;
-const CenteredLabel = ({
+const LABEL_PADDING = 8;
+const MIN_GAP = 4;
+const SingleLabel = ({
   value,
   position,
   sliderWidth,
-  thumbSize,
+  onWidthChange,
+  isVisible,
   theme
 }) => {
+  const styles = getStyles(theme);
+  const localWidth = useSharedValue(0);
+  const animatedStyle = useAnimatedStyle(() => {
+    const halfLabel = localWidth.value / 2;
+    const rawCenter = position.value;
+    const shifted = rawCenter - halfLabel;
+    const left = Math.min(Math.max(shifted, 0), sliderWidth - localWidth.value);
+    return {
+      left,
+      opacity: isVisible.value ? 1 : 0
+    };
+  });
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [styles.labelContainer, animatedStyle],
+    onLayout: e => {
+      const width = e.nativeEvent.layout.width;
+      localWidth.value = width;
+      onWidthChange(width);
+    },
+    children: /*#__PURE__*/_jsx(Text, {
+      style: styles.labelText,
+      children: value
+    })
+  });
+};
+const MergedLabel = ({
+  leftValue,
+  rightValue,
+  leftPosition,
+  rightPosition,
+  sliderWidth,
+  isVisible,
+  theme
+}) => {
+  const styles = getStyles(theme);
   const labelWidth = useSharedValue(0);
-  const {
-    theme: defaultTheme
-  } = useTheme();
-  const currTheme = theme || defaultTheme;
-  const styles = getStyles(currTheme);
-  const animatedLabelStyle = useAnimatedStyle(() => {
-    const rawCenter = position.value + thumbSize / 2;
-    const shifted = rawCenter - labelWidth.value / 2;
+  const animatedStyle = useAnimatedStyle(() => {
+    const centerPosition = (leftPosition.value + rightPosition.value) / 2;
+    const halfLabel = labelWidth.value / 2;
+    const shifted = centerPosition - halfLabel;
     const left = Math.min(Math.max(shifted, 0), sliderWidth - labelWidth.value);
     return {
-      left: left
+      left,
+      opacity: isVisible.value ? 1 : 0
     };
   });
+  const displayText = leftValue === rightValue ? leftValue : `${leftValue} - ${rightValue}`;
   return /*#__PURE__*/_jsx(Animated.View, {
-    style: [styles.labelContainer, animatedLabelStyle],
+    style: [styles.labelContainer, animatedStyle],
     onLayout: e => {
       labelWidth.value = e.nativeEvent.layout.width;
     },
     children: /*#__PURE__*/_jsx(Text, {
       style: styles.labelText,
-      children: value
+      children: displayText
     })
   });
 };
@@ -51,27 +87,54 @@ export const SliderLabels = ({
     theme: defaultTheme
   } = useTheme();
   const currTheme = theme || defaultTheme;
-  const styles = getStyles(currTheme);
-  const rightThumbLeftPosition = useDerivedValue(() => {
-    return rightPosition.value - thumbSize;
-  });
-  const leftThumbLeftPosition = useDerivedValue(() => {
-    return leftPosition.value - thumbSize;
-  });
   const isRTL = I18nManager.isRTL;
+
+  // Track label widths in parent for overlap calculation
+  const leftLabelWidth = useSharedValue(0);
+  const rightLabelWidth = useSharedValue(0);
+  const shouldMerge = useDerivedValue(() => {
+    const leftCenter = leftPosition.value;
+    const rightCenter = rightPosition.value;
+    const leftEnd = leftCenter + leftLabelWidth.value / 2;
+    const rightStart = rightCenter - rightLabelWidth.value / 2;
+    if (isRTL) {
+      const rtlLeftEnd = rightCenter + rightLabelWidth.value / 2;
+      const rtlRightStart = leftCenter - leftLabelWidth.value / 2;
+      return rtlRightStart - rtlLeftEnd < MIN_GAP;
+    }
+    return rightStart - leftEnd < MIN_GAP;
+  });
+  const showSeparate = useDerivedValue(() => !shouldMerge.value);
+  const showMerged = useDerivedValue(() => shouldMerge.value);
   return /*#__PURE__*/_jsxs(View, {
-    style: styles.wrapper,
+    style: getStyles(currTheme).wrapper,
     pointerEvents: "none",
-    children: [/*#__PURE__*/_jsx(CenteredLabel, {
+    children: [/*#__PURE__*/_jsx(SingleLabel, {
       value: leftValue,
-      thumbSize: thumbSize,
-      position: isRTL ? leftThumbLeftPosition : leftPosition,
-      sliderWidth: sliderWidth
-    }), /*#__PURE__*/_jsx(CenteredLabel, {
+      position: leftPosition,
+      sliderWidth: sliderWidth,
+      onWidthChange: width => {
+        leftLabelWidth.value = width;
+      },
+      isVisible: showSeparate,
+      theme: currTheme
+    }), /*#__PURE__*/_jsx(SingleLabel, {
       value: rightValue,
-      thumbSize: thumbSize,
-      position: isRTL ? rightPosition : rightThumbLeftPosition,
-      sliderWidth: sliderWidth
+      position: rightPosition,
+      sliderWidth: sliderWidth,
+      onWidthChange: width => {
+        rightLabelWidth.value = width;
+      },
+      isVisible: showSeparate,
+      theme: currTheme
+    }), /*#__PURE__*/_jsx(MergedLabel, {
+      leftValue: leftValue,
+      rightValue: rightValue,
+      leftPosition: leftPosition,
+      rightPosition: rightPosition,
+      sliderWidth: sliderWidth,
+      isVisible: showMerged,
+      theme: currTheme
     })]
   });
 };
@@ -88,7 +151,7 @@ const getStyles = theme => StyleSheet.create({
   },
   labelText: {
     backgroundColor: theme.surface,
-    paddingHorizontal: 8,
+    paddingHorizontal: LABEL_PADDING,
     paddingVertical: 4,
     borderRadius: 4,
     color: theme.onSurface,

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

@@ -1 +1 @@
-{"version":3,"names":["React","I18nManager","StyleSheet","Text","View","Animated","useAnimatedStyle","useDerivedValue","useSharedValue","useTheme","jsx","_jsx","jsxs","_jsxs","LABEL_HEIGHT","CenteredLabel","value","position","sliderWidth","thumbSize","theme","labelWidth","defaultTheme","currTheme","styles","getStyles","animatedLabelStyle","rawCenter","shifted","left","Math","min","max","style","labelContainer","onLayout","e","nativeEvent","layout","width","children","labelText","SliderLabels","leftValue","rightValue","leftPosition","rightPosition","rightThumbLeftPosition","leftThumbLeftPosition","isRTL","wrapper","pointerEvents","create","height","top","alignItems","backgroundColor","surface","paddingHorizontal","paddingVertical","borderRadius","color","onSurface","fontSize","fontFamily"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/RangeSlider/SliderLabel.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","I18nManager","StyleSheet","Text","View","Animated","useAnimatedStyle","useDerivedValue","useSharedValue","useTheme","jsx","_jsx","jsxs","_jsxs","LABEL_HEIGHT","LABEL_PADDING","MIN_GAP","SingleLabel","value","position","sliderWidth","onWidthChange","isVisible","theme","styles","getStyles","localWidth","animatedStyle","halfLabel","rawCenter","shifted","left","Math","min","max","opacity","style","labelContainer","onLayout","e","width","nativeEvent","layout","children","labelText","MergedLabel","leftValue","rightValue","leftPosition","rightPosition","labelWidth","centerPosition","displayText","SliderLabels","thumbSize","defaultTheme","currTheme","isRTL","leftLabelWidth","rightLabelWidth","shouldMerge","leftCenter","rightCenter","leftEnd","rightStart","rtlLeftEnd","rtlRightStart","showSeparate","showMerged","wrapper","pointerEvents","create","height","top","alignItems","backgroundColor","surface","paddingHorizontal","paddingVertical","borderRadius","color","onSurface","fontSize","fontFamily"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/RangeSlider/SliderLabel.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -14,11 +14,17 @@ interface RangeSliderProps {
     }) => void;
     theme?: ThemeType;
     scale?: ScaleType;
-    /**
-     * For percentile scale: array of all values in your dataset
-     * The slider will distribute positions based on data density
-     */
     dataPoints?: number[];
+    showCustomInputs?: boolean;
+    inputPlaceholders?: {
+        min?: string;
+        max?: string;
+    };
+    inputLabels?: {
+        min?: string;
+        max?: string;
+    };
+    isBottomSheet?: boolean;
 }
 declare const RangeSlider: React.FC<RangeSliderProps>;
 export default RangeSlider;

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

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../../../../src/components/RangeSlider/RangeSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAS9D,OAAO,EAAE,SAAS,EAAY,MAAM,aAAa,CAAC;AAMlD,KAAK,SAAS,GAAG,QAAQ,GAAG,aAAa,GAAG,YAAY,CAAC;AAEzD,UAAU,gBAAgB;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAiDD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwM3C,CAAC;AAyCF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../../../../src/components/RangeSlider/RangeSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAQ9D,OAAO,EAAE,SAAS,EAAY,MAAM,aAAa,CAAC;AASlD,KAAK,SAAS,GAAG,QAAQ,GAAG,aAAa,GAAG,YAAY,CAAC;AAEzD,UAAU,gBAAgB;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE;QAClB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,WAAW,CAAC,EAAE;QACZ,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA+CD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqW3C,CAAC;AAwEF,eAAe,WAAW,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"SliderLabel.d.ts","sourceRoot":"","sources":["../../../../../src/components/RangeSlider/SliderLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAiB,EACf,WAAW,EAIZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAY,MAAM,aAAa,CAAC;AAIlD,UAAU,iBAAiB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAgDD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqCpD,CAAC"}
+{"version":3,"file":"SliderLabel.d.ts","sourceRoot":"","sources":["../../../../../src/components/RangeSlider/SliderLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAiB,EACb,WAAW,EAId,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAY,MAAM,aAAa,CAAC;AAMlD,UAAU,iBAAiB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAiGD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsEpD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "related-ui-components",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "main": "lib/module/index.js",
   "scripts": {
     "start": "expo start",

package/src/components/RangeSlider/RangeSlider.tsx

@@ -6,10 +6,12 @@ import Animated, {
   useAnimatedStyle,
   useSharedValue,
 } from "react-native-reanimated";
-import { SliderLabels } from "./SliderLabel";
 import { ThemeType, useTheme } from "../../theme";
+import { SliderLabels } from "./SliderLabel";
+import { Input } from "../Input";
 
 const THUMB_SIZE = 28;
+const THUMB_RADIUS = THUMB_SIZE / 2;
 const RAIL_HEIGHT = 6;
 const LABEL_HEIGHT = 26;
 
@@ -25,11 +27,17 @@ interface RangeSliderProps {
   onValueChange: (values: { min: number; max: number }) => void;
   theme?: ThemeType;
   scale?: ScaleType;
-  /**
-   * For percentile scale: array of all values in your dataset
-   * The slider will distribute positions based on data density
-   */
   dataPoints?: number[];
+  showCustomInputs?: boolean;
+  inputPlaceholders?: {
+    min?: string;
+    max?: string;
+  };
+  inputLabels?: {
+    min?: string;
+    max?: string;
+  };
+  isBottomSheet?: boolean;
 }
 
 /**
@@ -39,12 +47,10 @@ interface RangeSliderProps {
 function createPercentileBreakpoints(data: number[]): number[] {
   const sorted = [...new Set(data)].sort((a, b) => a - b);
 
-  // If small dataset, use all unique values
   if (sorted.length <= 100) {
     return sorted;
   }
 
-  // For larger datasets, sample at percentile intervals
   const breakpoints: number[] = [];
   const numBreakpoints = 100;
 
@@ -90,6 +96,10 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
   theme,
   scale = "linear",
   dataPoints,
+  showCustomInputs = false,
+  inputPlaceholders,
+  inputLabels,
+  isBottomSheet = false,
 }) => {
   const { theme: defaultTheme } = useTheme();
   const currTheme = theme || defaultTheme;
@@ -98,9 +108,20 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
 
   const [leftLabel, setLeftLabel] = useState(initialMinValue.toLocaleString());
   const [rightLabel, setRightLabel] = useState(
-    initialMaxValue.toLocaleString()
+    initialMaxValue.toLocaleString(),
+  );
+
+  // State for custom input fields
+  const [minInputValue, setMinInputValue] = useState(
+    initialMinValue.toString(),
+  );
+  const [maxInputValue, setMaxInputValue] = useState(
+    initialMaxValue.toString(),
   );
 
+  // The effective track width (where thumb CENTER can travel)
+  const effectiveWidth = sliderWidth - THUMB_SIZE;
+
   // Pre-compute breakpoints for percentile scale
   const breakpoints = useMemo(() => {
     if (scale === "percentile" && dataPoints?.length) {
@@ -117,7 +138,6 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
       let percentage: number;
 
       if (scale === "percentile" && breakpoints.length > 1) {
-        // Find where this value falls in the breakpoints
         const index = findBreakpointIndex(breakpoints, value);
 
         if (index === 0) {
@@ -125,7 +145,6 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
         } else if (index >= breakpoints.length - 1) {
           percentage = 1;
         } else {
-          // Interpolate between breakpoints
           const lowerVal = breakpoints[index - 1];
           const upperVal = breakpoints[index];
           const lowerPct = (index - 1) / (breakpoints.length - 1);
@@ -147,41 +166,52 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
         percentage = (value - min) / (max - min);
       }
 
-      return isRTL ? (1 - percentage) * sliderWidth : percentage * sliderWidth;
+      // Map to effective width, offset by thumb radius
+      const position = percentage * effectiveWidth + THUMB_RADIUS;
+      return isRTL ? sliderWidth - position : position;
     },
-    [min, max, safeMin, sliderWidth, isRTL, scale, breakpoints]
+    [min, max, safeMin, sliderWidth, effectiveWidth, isRTL, scale, breakpoints],
   );
 
   const positionToValue = useCallback(
     (position: number) => {
       "worklet";
-      const percentage = isRTL
-        ? 1 - position / sliderWidth
-        : position / sliderWidth;
+      // Convert position to percentage using effective width
+      const adjustedPosition = isRTL ? sliderWidth - position : position;
+      const percentage = (adjustedPosition - THUMB_RADIUS) / effectiveWidth;
+      const clampedPercentage = Math.max(0, Math.min(1, percentage));
 
       let rawValue: number;
 
       if (scale === "percentile" && breakpoints.length > 1) {
-        // Map percentage to breakpoint index
-        const exactIndex = percentage * (breakpoints.length - 1);
+        const exactIndex = clampedPercentage * (breakpoints.length - 1);
         const lowerIndex = Math.floor(exactIndex);
         const upperIndex = Math.min(lowerIndex + 1, breakpoints.length - 1);
         const ratio = exactIndex - lowerIndex;
-
         rawValue =
           breakpoints[lowerIndex] +
           ratio * (breakpoints[upperIndex] - breakpoints[lowerIndex]);
       } else if (scale === "logarithmic") {
         const logMin = Math.log(safeMin);
         const logMax = Math.log(max);
-        rawValue = Math.exp(logMin + percentage * (logMax - logMin));
+        rawValue = Math.exp(logMin + clampedPercentage * (logMax - logMin));
       } else {
-        rawValue = percentage * (max - min) + min;
+        rawValue = clampedPercentage * (max - min) + min;
       }
 
       return Math.round(rawValue / step) * step;
     },
-    [min, max, safeMin, step, sliderWidth, isRTL, scale, breakpoints]
+    [
+      min,
+      max,
+      safeMin,
+      step,
+      sliderWidth,
+      effectiveWidth,
+      isRTL,
+      scale,
+      breakpoints,
+    ],
   );
 
   const leftPosition = useSharedValue(valueToPosition(initialMinValue));
@@ -206,21 +236,29 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
       const newPos = context.value.x + e.translationX;
 
       if (activeThumb.value === "left") {
-        const lowerBound = isRTL ? rightPosition.value + THUMB_SIZE : 0;
+        const lowerBound = isRTL
+          ? rightPosition.value + THUMB_SIZE
+          : THUMB_RADIUS;
         const upperBound = isRTL
-          ? sliderWidth
+          ? sliderWidth - THUMB_RADIUS
           : rightPosition.value - THUMB_SIZE;
         const clampedPos = Math.max(Math.min(newPos, upperBound), lowerBound);
         leftPosition.value = clampedPos;
-        runOnJS(setLeftLabel)(positionToValue(clampedPos).toLocaleString());
+        const newValue = positionToValue(clampedPos);
+        runOnJS(setLeftLabel)(newValue.toLocaleString());
+        runOnJS(setMinInputValue)(newValue.toString());
       } else {
-        const lowerBound = isRTL ? 0 : leftPosition.value + THUMB_SIZE;
+        const lowerBound = isRTL
+          ? THUMB_RADIUS
+          : leftPosition.value + THUMB_SIZE;
         const upperBound = isRTL
           ? leftPosition.value - THUMB_SIZE
-          : sliderWidth;
+          : sliderWidth - THUMB_RADIUS;
         const clampedPos = Math.max(Math.min(newPos, upperBound), lowerBound);
         rightPosition.value = clampedPos;
-        runOnJS(setRightLabel)(positionToValue(clampedPos).toLocaleString());
+        const newValue = positionToValue(clampedPos);
+        runOnJS(setRightLabel)(newValue.toLocaleString());
+        runOnJS(setMaxInputValue)(newValue.toString());
       }
     })
     .onEnd(() => {
@@ -231,12 +269,99 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
       activeThumb.value = null;
     });
 
+  // Handlers for custom input fields
+  const handleMinInputChange = useCallback((text: string) => {
+    // Allow only numeric input (with optional decimal)
+    const sanitized = text.replace(/[^0-9.]/g, "");
+    setMinInputValue(sanitized);
+  }, []);
+
+  const handleMaxInputChange = useCallback((text: string) => {
+    const sanitized = text.replace(/[^0-9.]/g, "");
+    setMaxInputValue(sanitized);
+  }, []);
+
+  const handleMinInputSubmit = useCallback(() => {
+    const parsed = parseFloat(minInputValue);
+    if (isNaN(parsed)) {
+      // Reset to current slider value
+      const currentValue = positionToValue(leftPosition.value);
+      setMinInputValue(currentValue.toString());
+      return;
+    }
+
+    // Clamp value: must be >= min and <= current max value
+    const currentMaxValue = positionToValue(rightPosition.value);
+    const clampedValue = Math.max(
+      min,
+      Math.min(parsed, currentMaxValue - step),
+    );
+    const steppedValue = Math.round(clampedValue / step) * step;
+
+    // Update input display
+    setMinInputValue(steppedValue.toString());
+    setLeftLabel(steppedValue.toLocaleString());
+
+    // Update slider position
+    leftPosition.value = valueToPosition(steppedValue);
+
+    // Trigger callback
+    onValueChange({ min: steppedValue, max: currentMaxValue });
+  }, [
+    minInputValue,
+    min,
+    step,
+    leftPosition,
+    rightPosition,
+    positionToValue,
+    valueToPosition,
+    onValueChange,
+  ]);
+
+  const handleMaxInputSubmit = useCallback(() => {
+    const parsed = parseFloat(maxInputValue);
+    if (isNaN(parsed)) {
+      // Reset to current slider value
+      const currentValue = positionToValue(rightPosition.value);
+      setMaxInputValue(currentValue.toString());
+      return;
+    }
+
+    // Clamp value: must be <= max and >= current min value
+    const currentMinValue = positionToValue(leftPosition.value);
+    const clampedValue = Math.min(
+      max,
+      Math.max(parsed, currentMinValue + step),
+    );
+    const steppedValue = Math.round(clampedValue / step) * step;
+
+    // Update input display
+    setMaxInputValue(steppedValue.toString());
+    setRightLabel(steppedValue.toLocaleString());
+
+    // Update slider position
+    rightPosition.value = valueToPosition(steppedValue);
+
+    // Trigger callback
+    onValueChange({ min: currentMinValue, max: steppedValue });
+  }, [
+    maxInputValue,
+    max,
+    step,
+    leftPosition,
+    rightPosition,
+    positionToValue,
+    valueToPosition,
+    onValueChange,
+  ]);
+
+  // Thumb position = center of thumb, so offset by radius to get left edge
   const animatedLeftThumbStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: leftPosition.value - (isRTL ? THUMB_SIZE : 0) }],
+    transform: [{ translateX: leftPosition.value - THUMB_RADIUS }],
   }));
 
   const animatedRightThumbStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: rightPosition.value - (isRTL ? 0 : THUMB_SIZE) }],
+    transform: [{ translateX: rightPosition.value - THUMB_RADIUS }],
   }));
 
   const animatedActiveRailStyle = useAnimatedStyle(() => {
@@ -249,15 +374,53 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
   });
 
   return (
-    <View style={[styles.container, { width: sliderWidth }]}>
-      <SliderLabels
-        leftValue={leftLabel}
-        rightValue={rightLabel}
-        leftPosition={leftPosition}
-        rightPosition={rightPosition}
-        sliderWidth={sliderWidth}
-        thumbSize={THUMB_SIZE}
-      />
+    <View
+      style={[
+        showCustomInputs ? styles.containerWithInputs : styles.container,
+        { width: sliderWidth },
+      ]}
+    >
+      {showCustomInputs ? (
+        <View style={styles.inputsContainer}>
+          <View style={styles.inputWrapper}>
+            <Input
+              label={inputLabels?.min ?? "Min"}
+              value={minInputValue}
+              onChangeText={handleMinInputChange}
+              onBlur={handleMinInputSubmit}
+              onSubmitEditing={handleMinInputSubmit}
+              keyboardType="numeric"
+              placeholder={inputPlaceholders?.min}
+              placeholderTextColor={currTheme.surfaceVariant}
+              returnKeyType="done"
+              isBottomSheet={isBottomSheet}
+            />
+          </View>
+          <View style={styles.inputWrapper}>
+            <Input
+              label={inputLabels?.max ?? "Max"}
+              value={maxInputValue}
+              onChangeText={handleMaxInputChange}
+              onBlur={handleMaxInputSubmit}
+              onSubmitEditing={handleMaxInputSubmit}
+              keyboardType="numeric"
+              placeholder={inputPlaceholders?.max}
+              placeholderTextColor={currTheme.surfaceVariant}
+              returnKeyType="done"
+              isBottomSheet={isBottomSheet}
+            />
+          </View>
+        </View>
+      ) : (
+        <SliderLabels
+          leftValue={leftLabel}
+          rightValue={rightLabel}
+          leftPosition={leftPosition}
+          rightPosition={rightPosition}
+          sliderWidth={sliderWidth}
+          thumbSize={THUMB_SIZE}
+        />
+      )}
 
       <GestureDetector gesture={panGesture}>
         <View style={styles.railContainer}>
@@ -289,6 +452,9 @@ const getStyles = (theme: ThemeType) =>
       marginTop: LABEL_HEIGHT,
       direction: "ltr",
     },
+    containerWithInputs: {
+      direction: "ltr",
+    },
     railContainer: {
       justifyContent: "center",
       height: THUMB_SIZE,
@@ -318,6 +484,34 @@ const getStyles = (theme: ThemeType) =>
       borderColor: theme.primary,
       borderWidth: 5,
     },
+    inputsContainer: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      gap: 16,
+      marginBottom: 12,
+      direction: I18nManager.isRTL ? "rtl" : "ltr",
+    },
+    inputWrapper: {
+      flex: 1,
+    },
+    inputLabel: {
+      color: theme.onSurface,
+      fontSize: 13,
+      fontFamily: "DinMedium",
+      marginBottom: 6,
+    },
+    input: {
+      backgroundColor: theme.background,
+      paddingHorizontal: 16,
+      paddingVertical: 10,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: theme.surfaceVariant,
+      color: theme.onSurface,
+      fontSize: 15,
+      fontFamily: "DinBold",
+      textAlign: "center",
+    },
   });
 
-export default RangeSlider;
+export default RangeSlider;

package/src/components/RangeSlider/SliderLabel.tsx

@@ -1,14 +1,16 @@
 import React from "react";
 import { I18nManager, StyleSheet, Text, View } from "react-native";
 import Animated, {
-  SharedValue,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
+    SharedValue,
+    useAnimatedStyle,
+    useDerivedValue,
+    useSharedValue,
 } from "react-native-reanimated";
 import { ThemeType, useTheme } from "../../theme";
 
 const LABEL_HEIGHT = 26;
+const LABEL_PADDING = 8;
+const MIN_GAP = 4;
 
 interface SliderLabelsProps {
   leftValue: string;
@@ -17,51 +19,100 @@ interface SliderLabelsProps {
   rightPosition: SharedValue<number>;
   sliderWidth: number;
   thumbSize: number;
-  theme?: ThemeType
+  theme?: ThemeType;
 }
 
-interface CenteredLabelProps {
+interface SingleLabelProps {
   value: string;
   position: SharedValue<number>;
   sliderWidth: number;
-  thumbSize: number;
-  theme?: ThemeType
+  onWidthChange: (width: number) => void;
+  isVisible: SharedValue<boolean>;
+  theme: ThemeType;
+}
 
+interface MergedLabelProps {
+  leftValue: string;
+  rightValue: string;
+  leftPosition: SharedValue<number>;
+  rightPosition: SharedValue<number>;
+  sliderWidth: number;
+  isVisible: SharedValue<boolean>;
+  theme: ThemeType;
 }
 
-const CenteredLabel: React.FC<CenteredLabelProps> = ({
+const SingleLabel: React.FC<SingleLabelProps> = ({
   value,
   position,
   sliderWidth,
-  thumbSize,
-  theme
+  onWidthChange,
+  isVisible,
+  theme,
 }) => {
-  const labelWidth = useSharedValue(0);
-  const {theme: defaultTheme} = useTheme();
-  const currTheme = theme || defaultTheme;
-  const styles = getStyles(currTheme);
+  const styles = getStyles(theme);
+  const localWidth = useSharedValue(0);
 
-  const animatedLabelStyle = useAnimatedStyle(() => {
-    const rawCenter = position.value + thumbSize / 2;
-    const shifted = rawCenter - labelWidth.value / 2;
+  const animatedStyle = useAnimatedStyle(() => {
+    const halfLabel = localWidth.value / 2;
+    const rawCenter = position.value;
+    const shifted = rawCenter - halfLabel;
+    const left = Math.min(Math.max(shifted, 0), sliderWidth - localWidth.value);
 
+    return {
+      left,
+      opacity: isVisible.value ? 1 : 0,
+    };
+  });
+
+  return (
+    <Animated.View
+      style={[styles.labelContainer, animatedStyle]}
+      onLayout={(e) => {
+        const width = e.nativeEvent.layout.width;
+        localWidth.value = width;
+        onWidthChange(width);
+      }}
+    >
+      <Text style={styles.labelText}>{value}</Text>
+    </Animated.View>
+  );
+};
+
+const MergedLabel: React.FC<MergedLabelProps> = ({
+  leftValue,
+  rightValue,
+  leftPosition,
+  rightPosition,
+  sliderWidth,
+  isVisible,
+  theme,
+}) => {
+  const styles = getStyles(theme);
+  const labelWidth = useSharedValue(0);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const centerPosition = (leftPosition.value + rightPosition.value) / 2;
+    const halfLabel = labelWidth.value / 2;
+    const shifted = centerPosition - halfLabel;
     const left = Math.min(Math.max(shifted, 0), sliderWidth - labelWidth.value);
 
     return {
-      left: left,
+      left,
+      opacity: isVisible.value ? 1 : 0,
     };
   });
 
+  const displayText =
+    leftValue === rightValue ? leftValue : `${leftValue} - ${rightValue}`;
+
   return (
     <Animated.View
-      style={[styles.labelContainer, animatedLabelStyle]}
+      style={[styles.labelContainer, animatedStyle]}
       onLayout={(e) => {
         labelWidth.value = e.nativeEvent.layout.width;
       }}
     >
-      <Text style={styles.labelText}>
-        {value}
-      </Text>
+      <Text style={styles.labelText}>{displayText}</Text>
     </Animated.View>
   );
 };
@@ -77,29 +128,62 @@ export const SliderLabels: React.FC<SliderLabelsProps> = ({
 }) => {
   const { theme: defaultTheme } = useTheme();
   const currTheme = theme || defaultTheme;
-  const styles = getStyles(currTheme);
-  const rightThumbLeftPosition = useDerivedValue(() => {
-    return rightPosition.value - thumbSize;
-  });
-  const leftThumbLeftPosition = useDerivedValue(() => {
-    return leftPosition.value - thumbSize;
+  const isRTL = I18nManager.isRTL;
+
+  // Track label widths in parent for overlap calculation
+  const leftLabelWidth = useSharedValue(0);
+  const rightLabelWidth = useSharedValue(0);
+
+  const shouldMerge = useDerivedValue(() => {
+    const leftCenter = leftPosition.value;
+    const rightCenter = rightPosition.value;
+
+    const leftEnd = leftCenter + leftLabelWidth.value / 2;
+    const rightStart = rightCenter - rightLabelWidth.value / 2;
+
+    if (isRTL) {
+      const rtlLeftEnd = rightCenter + rightLabelWidth.value / 2;
+      const rtlRightStart = leftCenter - leftLabelWidth.value / 2;
+      return rtlRightStart - rtlLeftEnd < MIN_GAP;
+    }
+
+    return rightStart - leftEnd < MIN_GAP;
   });
 
-  const isRTL = I18nManager.isRTL;
+  const showSeparate = useDerivedValue(() => !shouldMerge.value);
+  const showMerged = useDerivedValue(() => shouldMerge.value);
 
   return (
-    <View style={styles.wrapper} pointerEvents="none">
-      <CenteredLabel
+    <View style={getStyles(currTheme).wrapper} pointerEvents="none">
+      <SingleLabel
         value={leftValue}
-        thumbSize={thumbSize}
-        position={isRTL ? leftThumbLeftPosition : leftPosition}
+        position={leftPosition}
         sliderWidth={sliderWidth}
+        onWidthChange={(width) => {
+          leftLabelWidth.value = width;
+        }}
+        isVisible={showSeparate}
+        theme={currTheme}
       />
-      <CenteredLabel
+      <SingleLabel
         value={rightValue}
-        thumbSize={thumbSize}
-        position={isRTL ? rightPosition : rightThumbLeftPosition}
+        position={rightPosition}
+        sliderWidth={sliderWidth}
+        onWidthChange={(width) => {
+          rightLabelWidth.value = width;
+        }}
+        isVisible={showSeparate}
+        theme={currTheme}
+      />
+
+      <MergedLabel
+        leftValue={leftValue}
+        rightValue={rightValue}
+        leftPosition={leftPosition}
+        rightPosition={rightPosition}
         sliderWidth={sliderWidth}
+        isVisible={showMerged}
+        theme={currTheme}
       />
     </View>
   );
@@ -119,7 +203,7 @@ const getStyles = (theme: ThemeType) =>
     },
     labelText: {
       backgroundColor: theme.surface,
-      paddingHorizontal: 8,
+      paddingHorizontal: LABEL_PADDING,
       paddingVertical: 4,
       borderRadius: 4,
       color: theme.onSurface,