update

src/components/input/Slider.scss

@@ -11,21 +11,34 @@
     box-sizing: border-box;
 }
 
-.slider-item-bg {
+.slider-item-content{
     position: absolute;
+    height: 120px;
+    width: 578px;
+    display: flex;
+    flex-direction: row;
+    left: 0;
+    top: 0;
+    align-items: center;
+}
+
+.slider-item-bg {
+    // position: absolute;
     min-width: 112px;
     height: 112px;
     border-radius: 56px;
-    left: 4px;
-    top: 6px;
+    margin-left: 6px;
+    // left: 4px;
+    // top: 6px;
     background-color: #ffffff;
-    overflow: hidden;
+    // overflow: hidden;
+    position: relative;
 }
 
 .slider-item {
     position: absolute;
-    left: 4px;
-    top: 6px;
+    left: 0px;
+    top: 0px;
     min-width: 112px;
     height: 112px;
     border-radius: 56px;

src/components/input/Slider.tsx

@@ -29,7 +29,7 @@ export default function (props: { onChanged?: Function, value?: number, edit?: b
     };
 
     const handleTouchMove = (event) => {
-        console.log('aaaa',isSliding)
+        console.log('aaaa', isSliding)
         if (isSliding) {
             const { touches } = event;
             const touchX = touches[0].clientX;
@@ -50,7 +50,7 @@ export default function (props: { onChanged?: Function, value?: number, edit?: b
     };
 
     const handleTouchEnd = () => {
-        
+
         setIsSliding(false);
         if (props.onChanged) {
 
@@ -184,16 +184,18 @@ export default function (props: { onChanged?: Function, value?: number, edit?: b
                     t('feature.food.slider_tip_pre_meal_desc') :
                     t('feature.food.slider_tip_post_meal_desc')}</Text>
             </View>
-            <View className='slider-item-bg' style={{ width: brightness * 0.01 * rpxToPx(sliderWidth - 120) + rpxToPx(112) }}>
+            <View className='slider-item-content'>
+                <View className='slider-item-bg' style={{ width: brightness * 0.01 * rpxToPx(sliderWidth - 126) + rpxToPx(112) }}>
+                    <View className='slider-item' style={{
+                        width: brightness * 0.01 * rpxToPx(sliderWidth - 126) + rpxToPx(112)+1,
+                        backgroundColor: brightness <= 50 ? ColorType.fast : ColorType.food,
+                        opacity: calculateOpacity(brightness),
+                    }}>
 
+                    </View>
 
-            </View>
-            <View className='slider-item' style={{
-                width: brightness * 0.01 * rpxToPx(sliderWidth - 120) + rpxToPx(112),
-                backgroundColor: brightness <= 50 ? ColorType.fast : ColorType.food,
-                opacity: calculateOpacity(brightness),
-            }}>
 
+                </View>
             </View>
             {
                 isSliding || value != 0 ? <View className='slider-text-bg'>