slider web

src/components/Slider.web.js

@@ -6,7 +6,6 @@ import { LinearGradient } from "./LinearGradient/LinearGradient";
 
 const INITIAL_BOX_SIZE = 6;
 const HANDLE_SIZE = 20;
-const HANDLE_TOP_OFFSET = (INITIAL_BOX_SIZE - HANDLE_SIZE) / 2;
 
 const clamp01 = (value) => Math.min(1, Math.max(0, value));
 
@@ -21,7 +20,7 @@ const Slider = ({
 }) => {
   const [layoutWidth, setLayoutWidth] = useState(0);
   const [ratio, setRatio] = useState(
-    typeof progress === "number" ? clamp01(progress) : 0,
+    typeof progress === "number" ? clamp01(progress) : 0
   );
   const draggingRef = useRef(false);
 
@@ -43,7 +42,7 @@ const Slider = ({
       const nextRatio = clamp01(clampedX / available);
       setRatio(nextRatio);
     },
-    [layoutWidth],
+    [layoutWidth]
   );
 
   const handleGrant = useCallback(
@@ -55,7 +54,7 @@ const Slider = ({
         onSeekStart();
       }
     },
-    [seekEnabled, updateRatioFromX, onSeekStart],
+    [seekEnabled, updateRatioFromX, onSeekStart]
   );
 
   const handleMove = useCallback(
@@ -63,7 +62,7 @@ const Slider = ({
       if (!seekEnabled || !draggingRef.current) return;
       updateRatioFromX(event?.nativeEvent?.locationX || 0);
     },
-    [seekEnabled, updateRatioFromX],
+    [seekEnabled, updateRatioFromX]
   );
 
   const finishSeeking = useCallback(() => {
@@ -78,12 +77,15 @@ const Slider = ({
     }
   }, [seekEnabled, ratio, onSeek, onSeekEnd]);
 
-  const handleLayout = useCallback((event) => {
-    const width = event?.nativeEvent?.layout?.width || 0;
-    if (width !== layoutWidth) {
-      setLayoutWidth(width);
-    }
-  }, [layoutWidth]);
+  const handleLayout = useCallback(
+    (event) => {
+      const width = event?.nativeEvent?.layout?.width || 0;
+      if (width !== layoutWidth) {
+        setLayoutWidth(width);
+      }
+    },
+    [layoutWidth]
+  );
 
   const maxOffset = Math.max(layoutWidth - INITIAL_BOX_SIZE, 0);
   const offset = maxOffset * ratio;
@@ -159,7 +161,7 @@ const styles = StyleSheet.create({
     backgroundColor: "#f8f9ff",
     borderRadius: HANDLE_SIZE / 2,
     position: "absolute",
-    top: HANDLE_TOP_OFFSET,
+    // top: HANDLE_TOP_OFFSET,
     zIndex: 2,
     borderWidth: 4,
     borderColor: "#9B4DFF",
@@ -170,7 +172,6 @@ const styles = StyleSheet.create({
     },
     shadowOpacity: 0.17,
     shadowRadius: 3.05,
-    elevation: 4,
   },
   time: {
     fontSize: 14,