related-ui-components 2.6.1 → 2.6.2

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

@@ -1 +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":[]}
+{"version":3,"names":["React","useCallback","useState","StyleSheet","View","Gesture","GestureDetector","Animated","runOnJS","useAnimatedStyle","useSharedValue","SliderLabels","useTheme","jsx","_jsx","jsxs","_jsxs","THUMB_SIZE","RAIL_HEIGHT","LABEL_HEIGHT","RangeSlider","min","max","step","sliderWidth","initialMinValue","initialMaxValue","onValueChange","theme","defaultTheme","currTheme","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","style","container","width","children","leftValue","rightValue","thumbSize","gesture","railContainer","rail","activeRail","thumbContainer","thumb","create","height","justifyContent","marginTop","borderRadius","backgroundColor","surface","primary","alignItems","background","borderColor","borderWidth"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/RangeSlider/RangeSlider.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,95 @@
+"use strict";
+
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+import Animated, { useAnimatedStyle, useDerivedValue, 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;
+const CenteredLabel = ({
+  value,
+  position,
+  sliderWidth,
+  thumbSize,
+  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 left = Math.min(Math.max(shifted, 0), sliderWidth - labelWidth.value);
+    return {
+      left: left
+    };
+  });
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [styles.labelContainer, animatedLabelStyle],
+    onLayout: e => {
+      labelWidth.value = e.nativeEvent.layout.width;
+    },
+    children: /*#__PURE__*/_jsx(Text, {
+      style: styles.labelText,
+      children: value
+    })
+  });
+};
+export const SliderLabels = ({
+  leftValue,
+  rightValue,
+  leftPosition,
+  rightPosition,
+  sliderWidth,
+  thumbSize,
+  theme
+}) => {
+  const {
+    theme: defaultTheme
+  } = useTheme();
+  const currTheme = theme || defaultTheme;
+  const styles = getStyles(currTheme);
+  const rightThumbLeftPosition = useDerivedValue(() => {
+    return rightPosition.value - thumbSize;
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.wrapper,
+    pointerEvents: "none",
+    children: [/*#__PURE__*/_jsx(CenteredLabel, {
+      value: leftValue,
+      thumbSize: thumbSize,
+      position: leftPosition,
+      sliderWidth: sliderWidth
+    }), /*#__PURE__*/_jsx(CenteredLabel, {
+      value: rightValue,
+      thumbSize: thumbSize,
+      position: rightThumbLeftPosition,
+      sliderWidth: sliderWidth
+    })]
+  });
+};
+const getStyles = theme => StyleSheet.create({
+  wrapper: {
+    position: "absolute",
+    width: "100%",
+    height: "100%"
+  },
+  labelContainer: {
+    position: "absolute",
+    top: -LABEL_HEIGHT + 4,
+    alignItems: "center"
+  },
+  labelText: {
+    backgroundColor: theme.surface,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4,
+    color: theme.onSurface,
+    fontSize: 14,
+    fontFamily: "DinBold"
+  }
+});
+//# sourceMappingURL=SliderLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","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","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/app.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAqDxC,QAAA,MAAM,GAAG,yBA6ER,CAAC;AAUF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAsDxC,QAAA,MAAM,GAAG,yBA8ER,CAAC;AAUF,eAAe,GAAG,CAAC"}

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

@@ -1,39 +1,17 @@
 import React from "react";
-import { StyleProp, ViewStyle, TextStyle } from "react-native";
-export interface RangeSliderProps {
-    /** The minimum value of the slider. */
+import { ThemeType } from "../../theme";
+interface RangeSliderProps {
     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>;
+    theme?: ThemeType;
 }
 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,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"}
+{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../../../../src/components/RangeSlider/RangeSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AASrD,OAAO,EAAE,SAAS,EAAY,MAAM,aAAa,CAAC;AAMlD,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;IAE9D,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgI3C,CAAC;AAwCF,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { SharedValue } from "react-native-reanimated";
+import { ThemeType } from "../../theme";
+interface SliderLabelsProps {
+    leftValue: string;
+    rightValue: string;
+    leftPosition: SharedValue<number>;
+    rightPosition: SharedValue<number>;
+    sliderWidth: number;
+    thumbSize: number;
+    theme?: ThemeType;
+}
+export declare const SliderLabels: React.FC<SliderLabelsProps>;
+export {};
+//# sourceMappingURL=SliderLabel.d.ts.map

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

@@ -0,0 +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,CA+BpD,CAAC"}

package/package.json

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

package/src/app.tsx

@@ -10,6 +10,7 @@ import {
   HotelForm,
   HotelSummary,
   Filters,
+  RangeSlider,
 } from "./components";
 import { lightTheme, RelatedProvider, useTheme } from "./theme";
 import CircularProgressBar from "./components/ProgressBar/CircularProgressBar";
@@ -119,7 +120,8 @@ const App = () => {
               {/* <DateRangePicker onDatesChange={()=>{}} labelContainerStyle={{backgroundColor:"red"}}></DateRangePicker> */}
               {/* <CarRentalForm onSelectionChange={console.log}></CarRentalForm> */}
               {/* <CarouselCardStack data={DUMMY_DATA} /> */}
-              <CircularProgressBar variant="steps" totalSteps={4} currentStep={4} size={43}  strokeWidth={2} progressColor="#9CA0A3"></CircularProgressBar>
+              {/* <CircularProgressBar variant="steps" totalSteps={4} currentStep={4} size={43}  strokeWidth={2} progressColor="#9CA0A3"></CircularProgressBar> */}
+              <RangeSlider initialMinValue={0} initialMaxValue={100} min={0} max={500} sliderWidth={100} onValueChange={console.log}></RangeSlider>
               {/* <PhoneInput value="" onChangeText={() => {}} inputContainerStyle={{height: 55}}></PhoneInput> */}
             </SafeAreaView>
           </BottomSheetStackProvider>

package/src/components/RangeSlider/RangeSlider.tsx

@@ -1,62 +1,31 @@
 import React, { useCallback, useState } from "react";
-import {
-  StyleSheet,
-  View,
-  Text,
-  StyleProp,
-  ViewStyle,
-  TextStyle,
-} from "react-native";
+import { 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";
 import { ThemeType, useTheme } from "../../theme";
 
-const LABEL_HEIGHT = 26; // Default height for the label area above the thumb
+const THUMB_SIZE = 28;
+const RAIL_HEIGHT = 6;
+const LABEL_HEIGHT = 26;
 
-export interface RangeSliderProps {
-  // --- Core Functionality ---
-  /** The minimum value of the slider. */
+interface RangeSliderProps {
   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>;
+  theme?: ThemeType
 }
 
 const RangeSlider: React.FC<RangeSliderProps> = ({
-  // Core props
   min,
   max,
   step = 1,
@@ -64,27 +33,20 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
   initialMinValue,
   initialMaxValue,
   onValueChange,
-  // Sizing props
-  thumbSize = 28,
-  railHeight = 6,
-  // Styling props
-  containerStyle,
-  railStyle,
-  activeRailStyle,
-  thumbStyle,
-  labelContainerStyle,
-  labelTextStyle,
+  theme
 }) => {
-  const { theme } = useTheme();
-  const styles = getStyles(theme, thumbSize, railHeight);
+  const { theme: defaultTheme} = useTheme();
 
-  // State for labels, allowing them to have dynamic width
+  const currTheme = theme || defaultTheme;
+
+  const styles = getStyles(currTheme);
+
+  // State for label text values, passed down to the SliderLabels component
   const [leftLabel, setLeftLabel] = useState(initialMinValue.toLocaleString());
   const [rightLabel, setRightLabel] = useState(
     initialMaxValue.toLocaleString()
   );
 
-  // --- Worklets for calculations ---
   const valueToPosition = useCallback(
     (value: number) => {
       "worklet";
@@ -102,16 +64,13 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
     [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) {
@@ -126,15 +85,17 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
       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));
+        const clampedPos = Math.max(
+          0,
+          Math.min(newPos, rightPosition.value - THUMB_SIZE)
+        );
         leftPosition.value = clampedPos;
         runOnJS(setLeftLabel)(positionToValue(clampedPos).toLocaleString());
       } else {
         const clampedPos = Math.min(
           sliderWidth,
-          Math.max(newPos, leftPosition.value)
+          Math.max(newPos, leftPosition.value + THUMB_SIZE)
         );
         rightPosition.value = clampedPos;
         runOnJS(setRightLabel)(positionToValue(clampedPos).toLocaleString());
@@ -142,21 +103,18 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
     })
     .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 }],
+    transform: [{ translateX: rightPosition.value - THUMB_SIZE }],
   }));
 
   const animatedActiveRailStyle = useAnimatedStyle(() => ({
@@ -165,85 +123,70 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
   }));
 
   return (
-    <GestureDetector gesture={panGesture}>
-      <View style={[styles.container, { width: sliderWidth }, containerStyle]}>
+    <View style={[styles.container, { width: sliderWidth }]}>
+      <SliderLabels
+        leftValue={leftLabel}
+        rightValue={rightLabel}
+        leftPosition={leftPosition}
+        rightPosition={rightPosition}
+        sliderWidth={sliderWidth}
+        thumbSize={THUMB_SIZE}
+      />
+
+      <GestureDetector gesture={panGesture}>
         <View style={styles.railContainer}>
-          <View style={[styles.rail, railStyle]} />
+          <View style={styles.rail} />
+          <Animated.View style={[styles.activeRail, animatedActiveRailStyle]} />
+
           <Animated.View
-            style={[
-              styles.activeRail,
-              animatedActiveRailStyle,
-              activeRailStyle,
-            ]}
-          />
-        </View>
+            style={[styles.thumbContainer, animatedLeftThumbStyle]}
+          >
+            <View style={styles.thumb} />
+          </Animated.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>
+          <Animated.View
+            style={[styles.thumbContainer, animatedRightThumbStyle]}
+          >
+            <View style={styles.thumb} />
+          </Animated.View>
+        </View>
+      </GestureDetector>
+    </View>
   );
 };
 
-const getStyles = (theme: ThemeType, thumbSize: number, railHeight: number) =>
+const getStyles = (theme: ThemeType) =>
   StyleSheet.create({
     container: {
-      height: LABEL_HEIGHT + thumbSize,
+      height: LABEL_HEIGHT + THUMB_SIZE,
       justifyContent: "center",
+      marginTop: LABEL_HEIGHT, // Add margin to prevent label cutoff
     },
     railContainer: {
       justifyContent: "center",
+      height: THUMB_SIZE,
     },
     rail: {
-      height: railHeight,
-      borderRadius: railHeight / 2,
-      backgroundColor: theme.surfaceVariant,
+      height: RAIL_HEIGHT,
+      borderRadius: RAIL_HEIGHT / 2,
+      backgroundColor: theme.surface,
     },
     activeRail: {
-      height: railHeight,
+      height: RAIL_HEIGHT,
       backgroundColor: theme.primary,
       position: "absolute",
     },
     thumbContainer: {
       position: "absolute",
+      width: THUMB_SIZE,
+      height: THUMB_SIZE,
+      justifyContent: "center",
       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,
+      width: THUMB_SIZE,
+      height: THUMB_SIZE,
+      borderRadius: THUMB_SIZE / 2,
       backgroundColor: theme.background,
       borderColor: theme.primary,
       borderWidth: 5,