@xhsreds/reds-rn-next 0.10.1-beta202511051512 → 0.10.1-beta202511051557

package/lib/cjs/components/Slider/Slider.js

@@ -20,9 +20,11 @@ var Slider = function Slider(_ref) {
     initalValue = _ref$initalValue === void 0 ? 0 : _ref$initalValue,
     onValueChange = _ref.onValueChange,
     _ref$dotStyle = _ref.dotStyle,
-    dotStyle = _ref$dotStyle === void 0 ? {} : _ref$dotStyle;
+    dotStyle = _ref$dotStyle === void 0 ? {} : _ref$dotStyle,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 1 : _ref$step;
   pvCount_useUnmountedProcess.default("Slider");
-  var _useState = React.useState(reactNative.Dimensions.get("window").width * 0.8),
+  var _useState = React.useState(reactNative.Dimensions.get("window").width),
     _useState2 = _rollupPluginBabelHelpers._slicedToArray(_useState, 2),
     sliderWidth = _useState2[0],
     setSliderWidth = _useState2[1];
@@ -36,24 +38,50 @@ var Slider = function Slider(_ref) {
   if (value < min || value > max) {
     return;
   }
+  var getSteppedValue = React.useCallback(function (rawValue) {
+    var steppedValue = Math.round((rawValue - min) / step) * step + min;
+    return Math.max(min, Math.min(max, steppedValue));
+  }, [min, max, step]);
   var animatedValue = React.useRef(new reactNative.Animated.Value(initalValue * sliderWidth / (max - min))).current;
+  var animatedThumbValue = React.useRef(new reactNative.Animated.Value(initalValue * sliderWidth / (max - min) > 0 ? initalValue * sliderWidth / (max - min) - 8 : initalValue * sliderWidth / (max - min))).current;
   React.useEffect(function () {
     var handleOrientationChange = function handleOrientationChange() {
-      setSliderWidth(reactNative.Dimensions.get("window").width * 0.8);
+      setSliderWidth(reactNative.Dimensions.get("window").width);
     };
     var subscription = reactNative.Dimensions.addEventListener("change", handleOrientationChange);
     return function () {
       subscription.remove();
     };
   }, []);
-  var hanleValueUpdate = function hanleValueUpdate(gestureState) {
-    var currentValue = Math.max(min, Math.min(max, gestureState.dx / sliderWidth * (max - min) + initalValue));
-    setValue(currentValue);
-    animatedValue.setValue(currentValue * sliderWidth / (max - min));
+  var hanleValueUpdate = React.useCallback(function (gestureState) {
+    var rawValue = Math.max(min, Math.min(max, gestureState.dx / sliderWidth * (max - min) + initalValue));
+    var steppedValue = getSteppedValue(rawValue);
+    setValue(steppedValue);
+    animatedValue.setValue(steppedValue * sliderWidth / (max - min));
+    animatedThumbValue.setValue(steppedValue * sliderWidth / (max - min) > 0 ? steppedValue * sliderWidth / (max - min) - 8 : steppedValue * sliderWidth / (max - min));
     if (onValueChange) {
-      onValueChange(currentValue);
+      onValueChange(steppedValue);
     }
-  };
+  }, [min, max, sliderWidth, initalValue, step, getSteppedValue, onValueChange]);
+  var handleTrackPress = React.useCallback(function (event) {
+    var locationX = event.nativeEvent.locationX;
+    var rawValue = locationX / sliderWidth * (max - min) + min;
+    var steppedValue = getSteppedValue(rawValue);
+    setValue(steppedValue);
+    reactNative.Animated.timing(animatedValue, {
+      toValue: steppedValue * sliderWidth / (max - min),
+      duration: 200,
+      useNativeDriver: false
+    }).start();
+    reactNative.Animated.timing(animatedThumbValue, {
+      toValue: steppedValue * sliderWidth / (max - min) > 0 ? steppedValue * sliderWidth / (max - min) - 8 : steppedValue * sliderWidth / (max - min),
+      duration: 200,
+      useNativeDriver: false
+    }).start();
+    if (onValueChange) {
+      onValueChange(steppedValue);
+    }
+  }, [sliderWidth, min, max, getSteppedValue, onValueChange, animatedValue, animatedThumbValue]);
   var handleLayout = function handleLayout(event) {
     setSliderWidth(event.nativeEvent.layout.width);
   };
@@ -76,7 +104,7 @@ var Slider = function Slider(_ref) {
         hanleValueUpdate(gestureState);
       }
     });
-  }, []);
+  }, [hanleValueUpdate]);
   var styles2 = reactNative.StyleSheet.create({
     sliderContainer: {
       flexDirection: "row",
@@ -84,7 +112,7 @@ var Slider = function Slider(_ref) {
       justifyContent: "center"
     },
     trackContainer: {
-      width: "80%",
+      width: "100%",
       height: 4,
       backgroundColor: "rgba(48, 48, 52, 0.20)",
       borderRadius: 2
@@ -113,18 +141,26 @@ var Slider = function Slider(_ref) {
     }
   });
   return /* @__PURE__ */React.createElement(reactNative.View, {
-    style: styles2.sliderContainer,
+    style: styles2.sliderContainer
+  }, /* @__PURE__ */React.createElement(reactNative.View, {
+    style: styles2.trackContainer,
     onLayout: handleLayout
+  }, /* @__PURE__ */React.createElement(reactNative.TouchableWithoutFeedback, {
+    onPress: handleTrackPress
   }, /* @__PURE__ */React.createElement(reactNative.View, {
-    style: styles2.trackContainer
-  }, /* @__PURE__ */React.createElement(reactNative.Animated.View, {
+    style: {
+      position: "absolute",
+      width: "100%",
+      height: 4
+    }
+  })), /* @__PURE__ */React.createElement(reactNative.Animated.View, {
     style: [styles2.coloredTrack, {
       width: animatedValue
     }]
   }), /* @__PURE__ */React.createElement(reactNative.Animated.View, _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({
     style: [styles2.thumbButton, {
       transform: [{
-        translateX: animatedValue
+        translateX: animatedThumbValue
       }]
     }, dotStyle]
   }, panResponder.panHandlers), {}, {

package/lib/cjs/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo, useCallback } from \"react\";\nimport {\n  View,\n  TouchableWithoutFeedback,\n  Animated,\n  StyleSheet,\n  Dimensions,\n  GestureResponderEvent,\n  PanResponder,\n  LayoutChangeEvent,\n  PanResponderGestureState,\n} from \"react-native\";\n\nimport { RedsSlider, SliderDefaultProps } from \"./interface/index\";\nimport styles from \"./styles\";\nimport useMounted from \"../../pvCount/useUnmountedProcess\";\n\nconst Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChange, dotStyle = {} }: RedsSlider) => {\n  useMounted(\"Slider\");\n  const [sliderWidth, setSliderWidth] = useState(Dimensions.get(\"window\").width * 0.8);\n  const [value, setValue] = useState(initalValue);\n\n  if (max < min) {\n    return;\n  }\n  if (value < min || value > max) {\n    return;\n  }\n\n  const thumbPosition = (value / (max - min)) * sliderWidth;\n  const step = 1;\n  const animatedValue = useRef(new Animated.Value((initalValue * sliderWidth) / (max - min))).current;\n  useEffect(() => {\n    const handleOrientationChange = () => {\n      setSliderWidth(Dimensions.get(\"window\").width * 0.8);\n    };\n\n    const subscription = Dimensions.addEventListener(\"change\", handleOrientationChange);\n    return () => {\n      subscription.remove();\n      //Dimensions.removeEventListener(\"change\", handleOrientationChange);\n    };\n  }, []);\n\n  // 可以根据需要调整的滑块高度\n  const hanleValueUpdate = (gestureState: PanResponderGestureState) => {\n    const currentValue = Math.max(min, Math.min(max, (gestureState.dx / sliderWidth) * (max - min) + initalValue));\n\n    setValue(currentValue);\n    animatedValue.setValue((currentValue * sliderWidth) / (max - min));\n    if (onValueChange) {\n      onValueChange(currentValue);\n    }\n  };\n\n  const handleLayout = (event: LayoutChangeEvent) => {\n    setSliderWidth(event.nativeEvent.layout.width);\n  };\n\n  const panResponder = useMemo(\n    () =>\n      PanResponder.create({\n        onStartShouldSetPanResponder: () => true,\n        onMoveShouldSetPanResponder: () => true,\n        onPanResponderGrant: () => true,\n        onPanResponderRelease: () => true,\n        onPanResponderTerminate: () => {},\n        onPanResponderMove: (evt, gestureState) => {\n          hanleValueUpdate(gestureState);\n        },\n      }),\n    [],\n  );\n\n  const styles = StyleSheet.create({\n    sliderContainer: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n    trackContainer: {\n      width: \"80%\",\n      height: 4,\n      backgroundColor: \"rgba(48, 48, 52, 0.20)\",\n      borderRadius: 2,\n    },\n    coloredTrack: {\n      height: 4,\n      backgroundColor: \"#FF2442\",\n      borderRadius: 2,\n    },\n    thumbButton: {\n      width: 16,\n      height: 16,\n      position: \"absolute\",\n      top: -8,\n      borderRadius: 10,\n      backgroundColor: \"#FFF\",\n      shadowColor: \"rgba(0, 0, 0, 0.20)\",\n      shadowOffset: { width: 0, height: 1 },\n      shadowOpacity: 1,\n      shadowRadius: 4,\n      //Android\n      elevation: 2,\n    },\n  });\n\n  return (\n    <View style={styles.sliderContainer} onLayout={handleLayout}>\n      <View style={styles.trackContainer}>\n        <Animated.View style={[styles.coloredTrack, { width: animatedValue }]} />\n        <Animated.View\n          style={[styles.thumbButton, { transform: [{ translateX: animatedValue }] }, dotStyle]}\n          {...panResponder.panHandlers}\n          hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}\n        />\n      </View>\n    </View>\n  );\n};\n\nSlider.defaultProps = SliderDefaultProps;\nexport default Slider;\n"],"names":["Slider","_ref","defaultValue","_ref$min","min","_ref$max","max","_ref$initalValue","initalValue","onValueChange","_ref$dotStyle","dotStyle","useMounted","_useState","useState","Dimensions","get","width","_useState2","_slicedToArray","sliderWidth","setSliderWidth","_useState3","_useState4","value","setValue","animatedValue","useRef","Animated","Value","current","useEffect","handleOrientationChange","subscription","addEventListener","remove","hanleValueUpdate","gestureState","currentValue","Math","dx","handleLayout","event","nativeEvent","layout","panResponder","useMemo","PanResponder","create","onStartShouldSetPanResponder","onMoveShouldSetPanResponder","onPanResponderGrant","onPanResponderRelease","onPanResponderTerminate","onPanResponderMove","evt","styles","StyleSheet","sliderContainer","flexDirection","alignItems","justifyContent","trackContainer","height","backgroundColor","borderRadius","coloredTrack","thumbButton","position","top","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","React","createElement","View","style","onLayout","_objectSpread","transform","translateX","panHandlers","hitSlop","bottom","left","right","defaultProps","SliderDefaultProps"],"mappings":";;;;;;;;;;;;AAiBA,IAAMA,MAAS,GAAA,SAATA,MAASA,CAAAC,IAAA,EAAqG;AAAA,EAAlGA,IAAA,CAAAC,YAAA,CAAA;QAAAC,QAAA,GAAAF,IAAA,CAAcG;AAAAA,IAAAA,mBAAM,KAAA,CAAA,GAAA,CAAG,GAAAD,QAAA,CAAA;IAAAE,QAAA,GAAAJ,IAAA,CAAAK,GAAA,CAAA;AAAAA,IAAAA,GAAA,GAAAD,QAAA,KAAM,KAAA,CAAA,GAAA,GAAK,GAAAA,QAAA,CAAA;IAAAE,gBAAA,GAAAN,IAAA,CAAAO,WAAA,CAAA;AAAAA,IAAAA,WAAA,GAAAD,gBAAA,KAAc,KAAA,CAAA,GAAA,CAAG,GAAAA,gBAAA,CAAA;IAAAE,aAAA,GAAAR,IAAA,CAAAQ,aAAA,CAAA;IAAAC,aAAA,GAAAT,IAAA,CAAeU,QAAW,CAAA;AAAXA,IAAAA,QAAW,GAAAD,aAAA,KAAA,KAAA,CAAA,GAAA;EAC7FE,mCAAA,CAAW,QAAQ,CAAA,CAAA;AACb,EAAA,IAAAC,SAAA,GAAgCC,cAAA,CAASC,uBAAWC,GAAI,CAAA,QAAQ,CAAE,CAAAC,KAAA,GAAQ,GAAG,CAAA;IAAAC,UAAA,GAAAC,wCAAA,CAAAN,SAAA,EAAA,CAAA,CAAA;AAA5EO,IAAAA,WAAa,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAAG,IAAAA,cAAc,GAAAH,UAAA,CAAA,CAAA,CAAA,CAAA;AAClC,EAAA,IAAAI,UAAA,GAA0BR,eAASN,WAAW,CAAA;IAAAe,UAAA,GAAAJ,wCAAA,CAAAG,UAAA,EAAA,CAAA,CAAA;AAAvCE,IAAAA,KAAA,GAAAD,UAAA,CAAA,CAAA,CAAA;AAAOE,IAAAA,QAAQ,GAAAF,UAAA,CAAA,CAAA,CAAA,CAAA;EAEtB,IAAIjB,MAAMF,GAAK,EAAA;AACb,IAAA,OAAA;AACF,GAAA;AACI,EAAA,IAAAoB,KAAA,GAAQpB,GAAO,IAAAoB,KAAA,GAAQlB,GAAK,EAAA;AAC9B,IAAA,OAAA;AACF,GAAA;EAIM,IAAAoB,aAAA,GAAgBC,YAAO,CAAA,IAAIC,oBAAS,CAAAC,KAAA,CAAOrB,cAAcY,WAAgB,IAAAd,GAAA,GAAMF,GAAI,CAAA,CAAC,CAAE,CAAA0B,OAAA,CAAA;AAC5FC,EAAAA,eAAA,CAAU,YAAM;AACd,IAAA,IAAMC,0BAA0B,SAA1BA,0BAAgC;MACpCX,cAAA,CAAeN,sBAAW,CAAAC,GAAA,CAAI,QAAQ,CAAA,CAAEC,QAAQ,GAAG,CAAA,CAAA;KACrD,CAAA;IAEA,IAAMgB,YAAe,GAAAlB,sBAAA,CAAWmB,gBAAiB,CAAA,QAAA,EAAUF,uBAAuB,CAAA,CAAA;AAClF,IAAA,OAAO,YAAM;MACXC,YAAA,CAAaE,MAAO,EAAA,CAAA;KAEtB,CAAA;GACF,EAAG,EAAE,CAAA,CAAA;AAGC,EAAA,IAAAC,gBAAA,GAAmB,SAAnBA,gBAAAA,CAAoBC,YAA2C,EAAA;IACnE,IAAMC,YAAe,GAAAC,IAAA,CAAKjC,GAAI,CAAAF,GAAA,EAAKmC,IAAK,CAAAnC,GAAA,CAAIE,GAAM,EAAA+B,YAAA,CAAaG,EAAK,GAAApB,WAAA,IAAgBd,GAAM,GAAAF,GAAA,CAAA,GAAOI,WAAW,CAAC,CAAA,CAAA;IAE7GiB,QAAA,CAASa,YAAY,CAAA,CAAA;IACrBZ,aAAA,CAAcD,QAAU,CAAAa,YAAA,GAAelB,WAAgB,IAAAd,GAAA,GAAMF,GAAI,CAAA,CAAA,CAAA;AACjE,IAAA,IAAIK,aAAe,EAAA;MACjBA,aAAA,CAAc6B,YAAY,CAAA,CAAA;AAC5B,KAAA;GACF,CAAA;AAEM,EAAA,IAAAG,YAAA,GAAe,SAAfA,YAAAA,CAAgBC,KAA6B,EAAA;IAClCrB,cAAA,CAAAqB,KAAA,CAAMC,WAAY,CAAAC,MAAA,CAAO3B,KAAK,CAAA,CAAA;GAC/C,CAAA;EAEA,IAAM4B,YAAe,GAAAC,aAAA,CACnB,YAAA;IAAA,OACEC,yBAAaC,MAAO,CAAA;MAClBC,8BAA8B,SAA9BA;eAAoC,IAAA,CAAA;AAAA,OAAA;MACpCC,6BAA6B,SAA7BA;eAAmC,IAAA,CAAA;AAAA,OAAA;MACnCC,qBAAqB,SAArBA;eAA2B,IAAA,CAAA;AAAA,OAAA;MAC3BC,uBAAuB,SAAvBA;eAA6B,IAAA,CAAA;AAAA,OAAA;AAC7BC,MAAAA,yBAAyB,SAAzBA,0BAA+B,EAAC;AAChCC,MAAAA,kBAAA,EAAoB,SAApBA,kBAAAA,CAAqBC,GAAA,EAAKlB,YAAiB,EAAA;QACzCD,gBAAA,CAAiBC,YAAY,CAAA,CAAA;AAC/B,OAAA;AACF,KAAC,CAAA,CAAA;AAAA,GAAA,EACH,EACF,CAAA,CAAA;AAEMmB,EAAAA,IAAAA,OAAAA,GAASC,uBAAWT,MAAO,CAAA;AAC/BU,IAAAA,eAAiB,EAAA;AACfC,MAAAA,aAAe,EAAA,KAAA;AACfC,MAAAA,UAAY,EAAA,QAAA;AACZC,MAAAA,cAAgB,EAAA,QAAA;KAClB;AACAC,IAAAA,cAAgB,EAAA;AACd7C,MAAAA,KAAO,EAAA,KAAA;AACP8C,MAAAA,MAAQ,EAAA,CAAA;AACRC,MAAAA,eAAiB,EAAA,wBAAA;AACjBC,MAAAA,YAAc,EAAA,CAAA;KAChB;AACAC,IAAAA,YAAc,EAAA;AACZH,MAAAA,MAAQ,EAAA,CAAA;AACRC,MAAAA,eAAiB,EAAA,SAAA;AACjBC,MAAAA,YAAc,EAAA,CAAA;KAChB;AACAE,IAAAA,WAAa,EAAA;AACXlD,MAAAA,KAAO,EAAA,EAAA;AACP8C,MAAAA,MAAQ,EAAA,EAAA;AACRK,MAAAA,QAAU,EAAA,UAAA;MACVC,GAAK,EAAA,CAAA,CAAA;AACLJ,MAAAA,YAAc,EAAA,EAAA;AACdD,MAAAA,eAAiB,EAAA,MAAA;AACjBM,MAAAA,WAAa,EAAA,qBAAA;AACbC,MAAAA,YAAc,EAAA;AAAEtD,QAAAA,KAAO,EAAA,CAAA;AAAG8C,QAAAA,QAAQ,CAAA;OAAE;AACpCS,MAAAA,aAAe,EAAA,CAAA;AACfC,MAAAA,YAAc,EAAA,CAAA;AAAA;AAEdC,MAAAA,SAAW,EAAA,CAAA;AACb,KAAA;AACF,GAAC,CAAA,CAAA;AAGC,EAAA,sBAAAC,KAAA,CAAAC,aAAA,CAACC,gBAAK,EAAA;IAAAC,KAAA,EAAOtB,OAAO,CAAAE,eAAA;AAAiBqB,IAAAA,UAAUtC,YAAAA;AAC7C,GAAA,iBAAAkC,KAAA,CAAAC,aAAA,CAACC,gBAAK,EAAA;IAAAC,KAAA,EAAOtB,OAAO,CAAAM,cAAAA;GAAA,qCACjBlC,oBAAS,CAAAiD,IAAA,EAAT;AAAcC,IAAAA,KAAA,EAAO,CAACtB,OAAAA,CAAOU,YAAc,EAAA;AAAEjD,MAAAA,KAAO,EAAAS,aAAAA;KAAe,CAAA;AAAA,GAAG,CACvE,iBAAAiD,KAAA,CAAAC,aAAA,CAAChD,oBAAS,CAAAiD,IAAA,EAAAG,wCAAA,CAAAA,wCAAA,CAAA;AACRF,IAAAA,KAAO,EAAA,CAACtB,OAAO,CAAAW,WAAA,EAAa;AAAEc,MAAAA,SAAA,EAAW,CAAC;AAAEC,QAAAA,UAAY,EAAAxD,aAAAA;OAAe,CAAA;AAAE,OAAGf,QAAQ,CAAA;GAChFkC,EAAAA,YAAa,CAAAsC,WAAA,CAAA,EAAA,EAAA,EAAA;AACjBC,IAAAA,OAAA,EAAS;AAAEf,MAAAA,GAAK,EAAA,EAAA;AAAIgB,MAAAA,QAAQ,EAAI;AAAAC,MAAAA,IAAA,EAAM,EAAI;AAAAC,MAAAA,KAAA,EAAO,EAAA;AAAG,KAAA;GACtD,CAAA,CACF,CACF,CAAA,CAAA;AAEJ,EAAA;AAEAvF,MAAA,CAAOwF,YAAe,GAAAC,oDAAA;;;;"}
+{"version":3,"file":"Slider.js","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo, useCallback } from \"react\";\nimport {\n  View,\n  TouchableWithoutFeedback,\n  Animated,\n  StyleSheet,\n  Dimensions,\n  GestureResponderEvent,\n  PanResponder,\n  LayoutChangeEvent,\n  PanResponderGestureState,\n} from \"react-native\";\n\nimport { RedsSlider, SliderDefaultProps } from \"./interface/index\";\nimport styles from \"./styles\";\nimport useMounted from \"../../pvCount/useUnmountedProcess\";\n\nconst Slider = ({\n  defaultValue,\n  min = 0,\n  max = 100,\n  initalValue = 0,\n  onValueChange,\n  dotStyle = {},\n  step = 1,\n}: RedsSlider) => {\n  useMounted(\"Slider\");\n  const [sliderWidth, setSliderWidth] = useState(Dimensions.get(\"window\").width);\n  const [value, setValue] = useState(initalValue);\n\n  if (max < min) {\n    return;\n  }\n  if (value < min || value > max) {\n    return;\n  }\n\n  // 添加一个函数来计算最接近的step值\n  const getSteppedValue = useCallback(\n    (rawValue: number) => {\n      const steppedValue = Math.round((rawValue - min) / step) * step + min;\n      return Math.max(min, Math.min(max, steppedValue));\n    },\n    [min, max, step],\n  );\n\n  const animatedValue = useRef(new Animated.Value((initalValue * sliderWidth) / (max - min))).current;\n\n  const animatedThumbValue = useRef(\n    new Animated.Value(\n      (initalValue * sliderWidth) / (max - min) > 0\n        ? (initalValue * sliderWidth) / (max - min) - 8\n        : (initalValue * sliderWidth) / (max - min),\n    ),\n  ).current;\n\n  useEffect(() => {\n    const handleOrientationChange = () => {\n      setSliderWidth(Dimensions.get(\"window\").width);\n    };\n\n    const subscription = Dimensions.addEventListener(\"change\", handleOrientationChange);\n    return () => {\n      subscription.remove();\n    };\n  }, []);\n\n  // 可以根据需要调整的滑块高度\n  const hanleValueUpdate = useCallback(\n    (gestureState: PanResponderGestureState) => {\n      // 计算原始值\n      const rawValue = Math.max(min, Math.min(max, (gestureState.dx / sliderWidth) * (max - min) + initalValue));\n      // 根据step计算实际值\n      const steppedValue = getSteppedValue(rawValue);\n\n      setValue(steppedValue);\n      animatedValue.setValue((steppedValue * sliderWidth) / (max - min));\n      animatedThumbValue.setValue(\n        (steppedValue * sliderWidth) / (max - min) > 0\n          ? (steppedValue * sliderWidth) / (max - min) - 8\n          : (steppedValue * sliderWidth) / (max - min),\n      );\n\n      if (onValueChange) {\n        onValueChange(steppedValue);\n      }\n    },\n    [min, max, sliderWidth, initalValue, step, getSteppedValue, onValueChange],\n  );\n\n  // 添加点击轨道跳转功能（可选）\n  const handleTrackPress = useCallback(\n    (event: GestureResponderEvent) => {\n      const { locationX } = event.nativeEvent;\n      const rawValue = (locationX / sliderWidth) * (max - min) + min;\n      const steppedValue = getSteppedValue(rawValue);\n\n      setValue(steppedValue);\n\n      // 使用动画过渡到新位置\n      Animated.timing(animatedValue, {\n        toValue: (steppedValue * sliderWidth) / (max - min),\n        duration: 200,\n        useNativeDriver: false,\n      }).start();\n\n      Animated.timing(animatedThumbValue, {\n        toValue:\n          (steppedValue * sliderWidth) / (max - min) > 0\n            ? (steppedValue * sliderWidth) / (max - min) - 8\n            : (steppedValue * sliderWidth) / (max - min),\n        duration: 200,\n        useNativeDriver: false,\n      }).start();\n\n      if (onValueChange) {\n        onValueChange(steppedValue);\n      }\n    },\n    [sliderWidth, min, max, getSteppedValue, onValueChange, animatedValue, animatedThumbValue],\n  );\n\n  const handleLayout = (event: LayoutChangeEvent) => {\n    setSliderWidth(event.nativeEvent.layout.width);\n  };\n\n  const panResponder = useMemo(\n    () =>\n      PanResponder.create({\n        onStartShouldSetPanResponder: () => true,\n        onMoveShouldSetPanResponder: () => true,\n        onPanResponderGrant: () => true,\n        onPanResponderRelease: () => true,\n        onPanResponderTerminate: () => {},\n        onPanResponderMove: (evt, gestureState) => {\n          hanleValueUpdate(gestureState);\n        },\n      }),\n    [hanleValueUpdate],\n  );\n\n  const styles = StyleSheet.create({\n    sliderContainer: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n    trackContainer: {\n      width: \"100%\",\n      height: 4,\n      backgroundColor: \"rgba(48, 48, 52, 0.20)\",\n      borderRadius: 2,\n    },\n    coloredTrack: {\n      height: 4,\n      backgroundColor: \"#FF2442\",\n      borderRadius: 2,\n    },\n    thumbButton: {\n      width: 16,\n      height: 16,\n      position: \"absolute\",\n      top: -8,\n      borderRadius: 10,\n      backgroundColor: \"#FFF\",\n      shadowColor: \"rgba(0, 0, 0, 0.20)\",\n      shadowOffset: { width: 0, height: 1 },\n      shadowOpacity: 1,\n      shadowRadius: 4,\n      //Android\n      elevation: 2,\n    },\n  });\n\n  return (\n    <View style={styles.sliderContainer}>\n      <View style={styles.trackContainer} onLayout={handleLayout}>\n        {/* 添加可点击的轨道 */}\n        <TouchableWithoutFeedback onPress={handleTrackPress}>\n          <View style={{ position: \"absolute\", width: \"100%\", height: 4 }} />\n        </TouchableWithoutFeedback>\n\n        <Animated.View style={[styles.coloredTrack, { width: animatedValue }]} />\n        <Animated.View\n          style={[styles.thumbButton, { transform: [{ translateX: animatedThumbValue }] }, dotStyle]}\n          {...panResponder.panHandlers}\n          hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}\n        />\n      </View>\n    </View>\n  );\n};\n\nSlider.defaultProps = SliderDefaultProps;\nexport default Slider;\n"],"names":["Slider","_ref","defaultValue","_ref$min","min","_ref$max","max","_ref$initalValue","initalValue","onValueChange","_ref$dotStyle","dotStyle","_ref$step","step","useMounted","_useState","useState","Dimensions","get","width","_useState2","_slicedToArray","sliderWidth","setSliderWidth","_useState3","_useState4","value","setValue","getSteppedValue","useCallback","rawValue","steppedValue","Math","round","animatedValue","useRef","Animated","Value","current","animatedThumbValue","useEffect","handleOrientationChange","subscription","addEventListener","remove","hanleValueUpdate","gestureState","dx","handleTrackPress","event","locationX","nativeEvent","timing","toValue","duration","useNativeDriver","start","handleLayout","layout","panResponder","useMemo","PanResponder","create","onStartShouldSetPanResponder","onMoveShouldSetPanResponder","onPanResponderGrant","onPanResponderRelease","onPanResponderTerminate","onPanResponderMove","evt","styles","StyleSheet","sliderContainer","flexDirection","alignItems","justifyContent","trackContainer","height","backgroundColor","borderRadius","coloredTrack","thumbButton","position","top","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","View","style","React","createElement","onLayout","TouchableWithoutFeedback","onPress","_objectSpread","transform","translateX","panHandlers","hitSlop","bottom","left","right","defaultProps","SliderDefaultProps"],"mappings":"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"}

package/lib/esm/components/Slider/Slider.js

@@ -1,6 +1,6 @@
 import { _ as _slicedToArray, a as _objectSpread2 } from '../../_chunks/CAkwE9ZD.js';
-import React, { useState, useRef, useEffect, useMemo } from 'react';
-import { Dimensions, Animated, PanResponder, StyleSheet, View } from 'react-native';
+import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { Dimensions, Animated, PanResponder, StyleSheet, View, TouchableWithoutFeedback } from 'react-native';
 import { S as SliderDefaultProps } from '../../_chunks/BwgGhxV7.js';
 import useMounted from '../../pvCount/useUnmountedProcess.js';
 import '@xhs/reds-apm/src/index.native';
@@ -16,9 +16,11 @@ var Slider = function Slider(_ref) {
     initalValue = _ref$initalValue === void 0 ? 0 : _ref$initalValue,
     onValueChange = _ref.onValueChange,
     _ref$dotStyle = _ref.dotStyle,
-    dotStyle = _ref$dotStyle === void 0 ? {} : _ref$dotStyle;
+    dotStyle = _ref$dotStyle === void 0 ? {} : _ref$dotStyle,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 1 : _ref$step;
   useMounted("Slider");
-  var _useState = useState(Dimensions.get("window").width * 0.8),
+  var _useState = useState(Dimensions.get("window").width),
     _useState2 = _slicedToArray(_useState, 2),
     sliderWidth = _useState2[0],
     setSliderWidth = _useState2[1];
@@ -32,24 +34,50 @@ var Slider = function Slider(_ref) {
   if (value < min || value > max) {
     return;
   }
+  var getSteppedValue = useCallback(function (rawValue) {
+    var steppedValue = Math.round((rawValue - min) / step) * step + min;
+    return Math.max(min, Math.min(max, steppedValue));
+  }, [min, max, step]);
   var animatedValue = useRef(new Animated.Value(initalValue * sliderWidth / (max - min))).current;
+  var animatedThumbValue = useRef(new Animated.Value(initalValue * sliderWidth / (max - min) > 0 ? initalValue * sliderWidth / (max - min) - 8 : initalValue * sliderWidth / (max - min))).current;
   useEffect(function () {
     var handleOrientationChange = function handleOrientationChange() {
-      setSliderWidth(Dimensions.get("window").width * 0.8);
+      setSliderWidth(Dimensions.get("window").width);
     };
     var subscription = Dimensions.addEventListener("change", handleOrientationChange);
     return function () {
       subscription.remove();
     };
   }, []);
-  var hanleValueUpdate = function hanleValueUpdate(gestureState) {
-    var currentValue = Math.max(min, Math.min(max, gestureState.dx / sliderWidth * (max - min) + initalValue));
-    setValue(currentValue);
-    animatedValue.setValue(currentValue * sliderWidth / (max - min));
+  var hanleValueUpdate = useCallback(function (gestureState) {
+    var rawValue = Math.max(min, Math.min(max, gestureState.dx / sliderWidth * (max - min) + initalValue));
+    var steppedValue = getSteppedValue(rawValue);
+    setValue(steppedValue);
+    animatedValue.setValue(steppedValue * sliderWidth / (max - min));
+    animatedThumbValue.setValue(steppedValue * sliderWidth / (max - min) > 0 ? steppedValue * sliderWidth / (max - min) - 8 : steppedValue * sliderWidth / (max - min));
     if (onValueChange) {
-      onValueChange(currentValue);
+      onValueChange(steppedValue);
     }
-  };
+  }, [min, max, sliderWidth, initalValue, step, getSteppedValue, onValueChange]);
+  var handleTrackPress = useCallback(function (event) {
+    var locationX = event.nativeEvent.locationX;
+    var rawValue = locationX / sliderWidth * (max - min) + min;
+    var steppedValue = getSteppedValue(rawValue);
+    setValue(steppedValue);
+    Animated.timing(animatedValue, {
+      toValue: steppedValue * sliderWidth / (max - min),
+      duration: 200,
+      useNativeDriver: false
+    }).start();
+    Animated.timing(animatedThumbValue, {
+      toValue: steppedValue * sliderWidth / (max - min) > 0 ? steppedValue * sliderWidth / (max - min) - 8 : steppedValue * sliderWidth / (max - min),
+      duration: 200,
+      useNativeDriver: false
+    }).start();
+    if (onValueChange) {
+      onValueChange(steppedValue);
+    }
+  }, [sliderWidth, min, max, getSteppedValue, onValueChange, animatedValue, animatedThumbValue]);
   var handleLayout = function handleLayout(event) {
     setSliderWidth(event.nativeEvent.layout.width);
   };
@@ -72,7 +100,7 @@ var Slider = function Slider(_ref) {
         hanleValueUpdate(gestureState);
       }
     });
-  }, []);
+  }, [hanleValueUpdate]);
   var styles2 = StyleSheet.create({
     sliderContainer: {
       flexDirection: "row",
@@ -80,7 +108,7 @@ var Slider = function Slider(_ref) {
       justifyContent: "center"
     },
     trackContainer: {
-      width: "80%",
+      width: "100%",
       height: 4,
       backgroundColor: "rgba(48, 48, 52, 0.20)",
       borderRadius: 2
@@ -109,18 +137,26 @@ var Slider = function Slider(_ref) {
     }
   });
   return /* @__PURE__ */React.createElement(View, {
-    style: styles2.sliderContainer,
+    style: styles2.sliderContainer
+  }, /* @__PURE__ */React.createElement(View, {
+    style: styles2.trackContainer,
     onLayout: handleLayout
+  }, /* @__PURE__ */React.createElement(TouchableWithoutFeedback, {
+    onPress: handleTrackPress
   }, /* @__PURE__ */React.createElement(View, {
-    style: styles2.trackContainer
-  }, /* @__PURE__ */React.createElement(Animated.View, {
+    style: {
+      position: "absolute",
+      width: "100%",
+      height: 4
+    }
+  })), /* @__PURE__ */React.createElement(Animated.View, {
     style: [styles2.coloredTrack, {
       width: animatedValue
     }]
   }), /* @__PURE__ */React.createElement(Animated.View, _objectSpread2(_objectSpread2({
     style: [styles2.thumbButton, {
       transform: [{
-        translateX: animatedValue
+        translateX: animatedThumbValue
       }]
     }, dotStyle]
   }, panResponder.panHandlers), {}, {

package/lib/esm/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo, useCallback } from \"react\";\nimport {\n  View,\n  TouchableWithoutFeedback,\n  Animated,\n  StyleSheet,\n  Dimensions,\n  GestureResponderEvent,\n  PanResponder,\n  LayoutChangeEvent,\n  PanResponderGestureState,\n} from \"react-native\";\n\nimport { RedsSlider, SliderDefaultProps } from \"./interface/index\";\nimport styles from \"./styles\";\nimport useMounted from \"../../pvCount/useUnmountedProcess\";\n\nconst Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChange, dotStyle = {} }: RedsSlider) => {\n  useMounted(\"Slider\");\n  const [sliderWidth, setSliderWidth] = useState(Dimensions.get(\"window\").width * 0.8);\n  const [value, setValue] = useState(initalValue);\n\n  if (max < min) {\n    return;\n  }\n  if (value < min || value > max) {\n    return;\n  }\n\n  const thumbPosition = (value / (max - min)) * sliderWidth;\n  const step = 1;\n  const animatedValue = useRef(new Animated.Value((initalValue * sliderWidth) / (max - min))).current;\n  useEffect(() => {\n    const handleOrientationChange = () => {\n      setSliderWidth(Dimensions.get(\"window\").width * 0.8);\n    };\n\n    const subscription = Dimensions.addEventListener(\"change\", handleOrientationChange);\n    return () => {\n      subscription.remove();\n      //Dimensions.removeEventListener(\"change\", handleOrientationChange);\n    };\n  }, []);\n\n  // 可以根据需要调整的滑块高度\n  const hanleValueUpdate = (gestureState: PanResponderGestureState) => {\n    const currentValue = Math.max(min, Math.min(max, (gestureState.dx / sliderWidth) * (max - min) + initalValue));\n\n    setValue(currentValue);\n    animatedValue.setValue((currentValue * sliderWidth) / (max - min));\n    if (onValueChange) {\n      onValueChange(currentValue);\n    }\n  };\n\n  const handleLayout = (event: LayoutChangeEvent) => {\n    setSliderWidth(event.nativeEvent.layout.width);\n  };\n\n  const panResponder = useMemo(\n    () =>\n      PanResponder.create({\n        onStartShouldSetPanResponder: () => true,\n        onMoveShouldSetPanResponder: () => true,\n        onPanResponderGrant: () => true,\n        onPanResponderRelease: () => true,\n        onPanResponderTerminate: () => {},\n        onPanResponderMove: (evt, gestureState) => {\n          hanleValueUpdate(gestureState);\n        },\n      }),\n    [],\n  );\n\n  const styles = StyleSheet.create({\n    sliderContainer: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n    trackContainer: {\n      width: \"80%\",\n      height: 4,\n      backgroundColor: \"rgba(48, 48, 52, 0.20)\",\n      borderRadius: 2,\n    },\n    coloredTrack: {\n      height: 4,\n      backgroundColor: \"#FF2442\",\n      borderRadius: 2,\n    },\n    thumbButton: {\n      width: 16,\n      height: 16,\n      position: \"absolute\",\n      top: -8,\n      borderRadius: 10,\n      backgroundColor: \"#FFF\",\n      shadowColor: \"rgba(0, 0, 0, 0.20)\",\n      shadowOffset: { width: 0, height: 1 },\n      shadowOpacity: 1,\n      shadowRadius: 4,\n      //Android\n      elevation: 2,\n    },\n  });\n\n  return (\n    <View style={styles.sliderContainer} onLayout={handleLayout}>\n      <View style={styles.trackContainer}>\n        <Animated.View style={[styles.coloredTrack, { width: animatedValue }]} />\n        <Animated.View\n          style={[styles.thumbButton, { transform: [{ translateX: animatedValue }] }, dotStyle]}\n          {...panResponder.panHandlers}\n          hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}\n        />\n      </View>\n    </View>\n  );\n};\n\nSlider.defaultProps = SliderDefaultProps;\nexport default Slider;\n"],"names":["Slider","_ref","defaultValue","_ref$min","min","_ref$max","max","_ref$initalValue","initalValue","onValueChange","_ref$dotStyle","dotStyle","useMounted","_useState","useState","Dimensions","get","width","_useState2","_slicedToArray","sliderWidth","setSliderWidth","_useState3","_useState4","value","setValue","animatedValue","useRef","Animated","Value","current","useEffect","handleOrientationChange","subscription","addEventListener","remove","hanleValueUpdate","gestureState","currentValue","Math","dx","handleLayout","event","nativeEvent","layout","panResponder","useMemo","PanResponder","create","onStartShouldSetPanResponder","onMoveShouldSetPanResponder","onPanResponderGrant","onPanResponderRelease","onPanResponderTerminate","onPanResponderMove","evt","styles","StyleSheet","sliderContainer","flexDirection","alignItems","justifyContent","trackContainer","height","backgroundColor","borderRadius","coloredTrack","thumbButton","position","top","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","React","createElement","View","style","onLayout","_objectSpread","transform","translateX","panHandlers","hitSlop","bottom","left","right","defaultProps","SliderDefaultProps"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo, useCallback } from \"react\";\nimport {\n  View,\n  TouchableWithoutFeedback,\n  Animated,\n  StyleSheet,\n  Dimensions,\n  GestureResponderEvent,\n  PanResponder,\n  LayoutChangeEvent,\n  PanResponderGestureState,\n} from \"react-native\";\n\nimport { RedsSlider, SliderDefaultProps } from \"./interface/index\";\nimport styles from \"./styles\";\nimport useMounted from \"../../pvCount/useUnmountedProcess\";\n\nconst Slider = ({\n  defaultValue,\n  min = 0,\n  max = 100,\n  initalValue = 0,\n  onValueChange,\n  dotStyle = {},\n  step = 1,\n}: RedsSlider) => {\n  useMounted(\"Slider\");\n  const [sliderWidth, setSliderWidth] = useState(Dimensions.get(\"window\").width);\n  const [value, setValue] = useState(initalValue);\n\n  if (max < min) {\n    return;\n  }\n  if (value < min || value > max) {\n    return;\n  }\n\n  // 添加一个函数来计算最接近的step值\n  const getSteppedValue = useCallback(\n    (rawValue: number) => {\n      const steppedValue = Math.round((rawValue - min) / step) * step + min;\n      return Math.max(min, Math.min(max, steppedValue));\n    },\n    [min, max, step],\n  );\n\n  const animatedValue = useRef(new Animated.Value((initalValue * sliderWidth) / (max - min))).current;\n\n  const animatedThumbValue = useRef(\n    new Animated.Value(\n      (initalValue * sliderWidth) / (max - min) > 0\n        ? (initalValue * sliderWidth) / (max - min) - 8\n        : (initalValue * sliderWidth) / (max - min),\n    ),\n  ).current;\n\n  useEffect(() => {\n    const handleOrientationChange = () => {\n      setSliderWidth(Dimensions.get(\"window\").width);\n    };\n\n    const subscription = Dimensions.addEventListener(\"change\", handleOrientationChange);\n    return () => {\n      subscription.remove();\n    };\n  }, []);\n\n  // 可以根据需要调整的滑块高度\n  const hanleValueUpdate = useCallback(\n    (gestureState: PanResponderGestureState) => {\n      // 计算原始值\n      const rawValue = Math.max(min, Math.min(max, (gestureState.dx / sliderWidth) * (max - min) + initalValue));\n      // 根据step计算实际值\n      const steppedValue = getSteppedValue(rawValue);\n\n      setValue(steppedValue);\n      animatedValue.setValue((steppedValue * sliderWidth) / (max - min));\n      animatedThumbValue.setValue(\n        (steppedValue * sliderWidth) / (max - min) > 0\n          ? (steppedValue * sliderWidth) / (max - min) - 8\n          : (steppedValue * sliderWidth) / (max - min),\n      );\n\n      if (onValueChange) {\n        onValueChange(steppedValue);\n      }\n    },\n    [min, max, sliderWidth, initalValue, step, getSteppedValue, onValueChange],\n  );\n\n  // 添加点击轨道跳转功能（可选）\n  const handleTrackPress = useCallback(\n    (event: GestureResponderEvent) => {\n      const { locationX } = event.nativeEvent;\n      const rawValue = (locationX / sliderWidth) * (max - min) + min;\n      const steppedValue = getSteppedValue(rawValue);\n\n      setValue(steppedValue);\n\n      // 使用动画过渡到新位置\n      Animated.timing(animatedValue, {\n        toValue: (steppedValue * sliderWidth) / (max - min),\n        duration: 200,\n        useNativeDriver: false,\n      }).start();\n\n      Animated.timing(animatedThumbValue, {\n        toValue:\n          (steppedValue * sliderWidth) / (max - min) > 0\n            ? (steppedValue * sliderWidth) / (max - min) - 8\n            : (steppedValue * sliderWidth) / (max - min),\n        duration: 200,\n        useNativeDriver: false,\n      }).start();\n\n      if (onValueChange) {\n        onValueChange(steppedValue);\n      }\n    },\n    [sliderWidth, min, max, getSteppedValue, onValueChange, animatedValue, animatedThumbValue],\n  );\n\n  const handleLayout = (event: LayoutChangeEvent) => {\n    setSliderWidth(event.nativeEvent.layout.width);\n  };\n\n  const panResponder = useMemo(\n    () =>\n      PanResponder.create({\n        onStartShouldSetPanResponder: () => true,\n        onMoveShouldSetPanResponder: () => true,\n        onPanResponderGrant: () => true,\n        onPanResponderRelease: () => true,\n        onPanResponderTerminate: () => {},\n        onPanResponderMove: (evt, gestureState) => {\n          hanleValueUpdate(gestureState);\n        },\n      }),\n    [hanleValueUpdate],\n  );\n\n  const styles = StyleSheet.create({\n    sliderContainer: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n    trackContainer: {\n      width: \"100%\",\n      height: 4,\n      backgroundColor: \"rgba(48, 48, 52, 0.20)\",\n      borderRadius: 2,\n    },\n    coloredTrack: {\n      height: 4,\n      backgroundColor: \"#FF2442\",\n      borderRadius: 2,\n    },\n    thumbButton: {\n      width: 16,\n      height: 16,\n      position: \"absolute\",\n      top: -8,\n      borderRadius: 10,\n      backgroundColor: \"#FFF\",\n      shadowColor: \"rgba(0, 0, 0, 0.20)\",\n      shadowOffset: { width: 0, height: 1 },\n      shadowOpacity: 1,\n      shadowRadius: 4,\n      //Android\n      elevation: 2,\n    },\n  });\n\n  return (\n    <View style={styles.sliderContainer}>\n      <View style={styles.trackContainer} onLayout={handleLayout}>\n        {/* 添加可点击的轨道 */}\n        <TouchableWithoutFeedback onPress={handleTrackPress}>\n          <View style={{ position: \"absolute\", width: \"100%\", height: 4 }} />\n        </TouchableWithoutFeedback>\n\n        <Animated.View style={[styles.coloredTrack, { width: animatedValue }]} />\n        <Animated.View\n          style={[styles.thumbButton, { transform: [{ translateX: animatedThumbValue }] }, dotStyle]}\n          {...panResponder.panHandlers}\n          hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}\n        />\n      </View>\n    </View>\n  );\n};\n\nSlider.defaultProps = SliderDefaultProps;\nexport default Slider;\n"],"names":["Slider","_ref","defaultValue","_ref$min","min","_ref$max","max","_ref$initalValue","initalValue","onValueChange","_ref$dotStyle","dotStyle","_ref$step","step","useMounted","_useState","useState","Dimensions","get","width","_useState2","_slicedToArray","sliderWidth","setSliderWidth","_useState3","_useState4","value","setValue","getSteppedValue","useCallback","rawValue","steppedValue","Math","round","animatedValue","useRef","Animated","Value","current","animatedThumbValue","useEffect","handleOrientationChange","subscription","addEventListener","remove","hanleValueUpdate","gestureState","dx","handleTrackPress","event","locationX","nativeEvent","timing","toValue","duration","useNativeDriver","start","handleLayout","layout","panResponder","useMemo","PanResponder","create","onStartShouldSetPanResponder","onMoveShouldSetPanResponder","onPanResponderGrant","onPanResponderRelease","onPanResponderTerminate","onPanResponderMove","evt","styles","StyleSheet","sliderContainer","flexDirection","alignItems","justifyContent","trackContainer","height","backgroundColor","borderRadius","coloredTrack","thumbButton","position","top","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","View","style","React","createElement","onLayout","TouchableWithoutFeedback","onPress","_objectSpread","transform","translateX","panHandlers","hitSlop","bottom","left","right","defaultProps","SliderDefaultProps"],"mappings":"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"}

package/lib/src/components/Slider/Slider.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { RedsSlider } from "./interface/index";
 declare const Slider: {
-    ({ defaultValue, min, max, initalValue, onValueChange, dotStyle }: RedsSlider): React.JSX.Element;
+    ({ defaultValue, min, max, initalValue, onValueChange, dotStyle, step, }: RedsSlider): React.JSX.Element;
     defaultProps: {
         value: number;
         min: number;

package/lib/types/components/Slider/Slider.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { RedsSlider } from "./interface/index";
 declare const Slider: {
-    ({ defaultValue, min, max, initalValue, onValueChange, dotStyle }: RedsSlider): React.JSX.Element | undefined;
+    ({ defaultValue, min, max, initalValue, onValueChange, dotStyle, step, }: RedsSlider): React.JSX.Element | undefined;
     defaultProps: {
         value: number;
         min: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xhsreds/reds-rn-next",
-  "version": "0.10.1-beta202511051512",
+  "version": "0.10.1-beta202511051557",
   "author": "贾斌(呀哈) <jiabin@xiaohongshu.com>",
   "license": "ISC",
   "dependencies": {
@@ -26,7 +26,7 @@
     "react-native-fs": "2.20.0",
     "react-native-svg": "13.14.0",
     "@xhs/react-native-harmony": "*",
-    "@xhsreds/reds-token-next": "0.10.1-beta202511051512"
+    "@xhsreds/reds-token-next": "0.10.1-beta202511051557"
   },
   "peerDependenciesMeta": {
     "ozone-schema-web": {

package/src/components/Slider/Slider.tsx

@@ -15,9 +15,17 @@ import { RedsSlider, SliderDefaultProps } from "./interface/index";
 import styles from "./styles";
 import useMounted from "../../pvCount/useUnmountedProcess";
 
-const Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChange, dotStyle = {} }: RedsSlider) => {
+const Slider = ({
+  defaultValue,
+  min = 0,
+  max = 100,
+  initalValue = 0,
+  onValueChange,
+  dotStyle = {},
+  step = 1,
+}: RedsSlider) => {
   useMounted("Slider");
-  const [sliderWidth, setSliderWidth] = useState(Dimensions.get("window").width * 0.8);
+  const [sliderWidth, setSliderWidth] = useState(Dimensions.get("window").width);
   const [value, setValue] = useState(initalValue);
 
   if (max < min) {
@@ -27,31 +35,90 @@ const Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChan
     return;
   }
 
-  const thumbPosition = (value / (max - min)) * sliderWidth;
-  const step = 1;
+  // 添加一个函数来计算最接近的step值
+  const getSteppedValue = useCallback(
+    (rawValue: number) => {
+      const steppedValue = Math.round((rawValue - min) / step) * step + min;
+      return Math.max(min, Math.min(max, steppedValue));
+    },
+    [min, max, step],
+  );
+
   const animatedValue = useRef(new Animated.Value((initalValue * sliderWidth) / (max - min))).current;
+
+  const animatedThumbValue = useRef(
+    new Animated.Value(
+      (initalValue * sliderWidth) / (max - min) > 0
+        ? (initalValue * sliderWidth) / (max - min) - 8
+        : (initalValue * sliderWidth) / (max - min),
+    ),
+  ).current;
+
   useEffect(() => {
     const handleOrientationChange = () => {
-      setSliderWidth(Dimensions.get("window").width * 0.8);
+      setSliderWidth(Dimensions.get("window").width);
     };
 
     const subscription = Dimensions.addEventListener("change", handleOrientationChange);
     return () => {
       subscription.remove();
-      //Dimensions.removeEventListener("change", handleOrientationChange);
     };
   }, []);
 
   // 可以根据需要调整的滑块高度
-  const hanleValueUpdate = (gestureState: PanResponderGestureState) => {
-    const currentValue = Math.max(min, Math.min(max, (gestureState.dx / sliderWidth) * (max - min) + initalValue));
-
-    setValue(currentValue);
-    animatedValue.setValue((currentValue * sliderWidth) / (max - min));
-    if (onValueChange) {
-      onValueChange(currentValue);
-    }
-  };
+  const hanleValueUpdate = useCallback(
+    (gestureState: PanResponderGestureState) => {
+      // 计算原始值
+      const rawValue = Math.max(min, Math.min(max, (gestureState.dx / sliderWidth) * (max - min) + initalValue));
+      // 根据step计算实际值
+      const steppedValue = getSteppedValue(rawValue);
+
+      setValue(steppedValue);
+      animatedValue.setValue((steppedValue * sliderWidth) / (max - min));
+      animatedThumbValue.setValue(
+        (steppedValue * sliderWidth) / (max - min) > 0
+          ? (steppedValue * sliderWidth) / (max - min) - 8
+          : (steppedValue * sliderWidth) / (max - min),
+      );
+
+      if (onValueChange) {
+        onValueChange(steppedValue);
+      }
+    },
+    [min, max, sliderWidth, initalValue, step, getSteppedValue, onValueChange],
+  );
+
+  // 添加点击轨道跳转功能（可选）
+  const handleTrackPress = useCallback(
+    (event: GestureResponderEvent) => {
+      const { locationX } = event.nativeEvent;
+      const rawValue = (locationX / sliderWidth) * (max - min) + min;
+      const steppedValue = getSteppedValue(rawValue);
+
+      setValue(steppedValue);
+
+      // 使用动画过渡到新位置
+      Animated.timing(animatedValue, {
+        toValue: (steppedValue * sliderWidth) / (max - min),
+        duration: 200,
+        useNativeDriver: false,
+      }).start();
+
+      Animated.timing(animatedThumbValue, {
+        toValue:
+          (steppedValue * sliderWidth) / (max - min) > 0
+            ? (steppedValue * sliderWidth) / (max - min) - 8
+            : (steppedValue * sliderWidth) / (max - min),
+        duration: 200,
+        useNativeDriver: false,
+      }).start();
+
+      if (onValueChange) {
+        onValueChange(steppedValue);
+      }
+    },
+    [sliderWidth, min, max, getSteppedValue, onValueChange, animatedValue, animatedThumbValue],
+  );
 
   const handleLayout = (event: LayoutChangeEvent) => {
     setSliderWidth(event.nativeEvent.layout.width);
@@ -69,7 +136,7 @@ const Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChan
           hanleValueUpdate(gestureState);
         },
       }),
-    [],
+    [hanleValueUpdate],
   );
 
   const styles = StyleSheet.create({
@@ -79,7 +146,7 @@ const Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChan
       justifyContent: "center",
     },
     trackContainer: {
-      width: "80%",
+      width: "100%",
       height: 4,
       backgroundColor: "rgba(48, 48, 52, 0.20)",
       borderRadius: 2,
@@ -106,11 +173,16 @@ const Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChan
   });
 
   return (
-    <View style={styles.sliderContainer} onLayout={handleLayout}>
-      <View style={styles.trackContainer}>
+    <View style={styles.sliderContainer}>
+      <View style={styles.trackContainer} onLayout={handleLayout}>
+        {/* 添加可点击的轨道 */}
+        <TouchableWithoutFeedback onPress={handleTrackPress}>
+          <View style={{ position: "absolute", width: "100%", height: 4 }} />
+        </TouchableWithoutFeedback>
+
         <Animated.View style={[styles.coloredTrack, { width: animatedValue }]} />
         <Animated.View
-          style={[styles.thumbButton, { transform: [{ translateX: animatedValue }] }, dotStyle]}
+          style={[styles.thumbButton, { transform: [{ translateX: animatedThumbValue }] }, dotStyle]}
           {...panResponder.panHandlers}
           hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
         />

package/src/components/Slider/demo/index.tsx

@@ -8,6 +8,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     paddingTop: 100,
     paddingBottom: 100,
+    paddingHorizontal: 50,
   },
   scrollView: {
     backgroundColor: "pink",
@@ -44,6 +45,23 @@ export default function App() {
       <Br />
       <Slider min={200} max={100}></Slider>
       <Br />
+      <Desc>step使用示例</Desc>
+      <Slider
+        min={0}
+        max={100}
+        step={10} // 每次移动10个单位
+        initalValue={0}
+        onValueChange={(value: any) => console.log("Current value:", value)}
+      />
+      <Br />
+      <Desc>step使用示例(或者更小的步长)</Desc>
+      <Slider
+        min={0}
+        max={1}
+        step={0.1} // 每次移动0.1个单位
+        initalValue={0.5}
+        onValueChange={(value: any) => console.log("Current value:", value)}
+      />
     </View>
   );
 }