@nutui/nutui-react-taro 3.0.11 → 3.0.12

package/dist/cjs/packages/range/range.js

@@ -19,6 +19,7 @@ var _ts_generator = require("@swc/helpers/_/_ts_generator");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _components = require("@tarojs/components");
+var _taro = require("@tarojs/taro");
 var _pxtransform = require("../../utils/taro/px-transform");
 var _usetouch = require("../../hooks/use-touch");
 var _typings = require("../../utils/typings");
@@ -26,6 +27,7 @@ var _usepropsvalue = require("../../hooks/use-props-value");
 var _getrect = require("../../utils/taro/get-rect");
 var _index = require("../configprovider/index");
 var _platform = require("../../utils/taro/platform");
+var _mergeprops = require("../../utils/merge-props");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     range: false,
     min: 0,
@@ -41,25 +43,23 @@ var isSameValue = function isSameValue(newValue, oldValue) {
     return JSON.stringify(newValue) === JSON.stringify(oldValue);
 };
 var handleOverlap = function handleOverlap(value) {
-    if (value[0] > value[1]) {
-        return value.slice(0).reverse();
-    }
-    return value;
+    return value[0] > value[1] ? value.slice(0).reverse() : value;
 };
 var Range = function Range(props) {
     var rtl = (0, _index.useRtl)();
-    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, range = _$_object_spread.range, disabled = _$_object_spread.disabled, button = _$_object_spread.button, vertical = _$_object_spread.vertical, marks = _$_object_spread.marks, minDescription = _$_object_spread.minDescription, maxDescription = _$_object_spread.maxDescription, currentDescription = _$_object_spread.currentDescription, min = _$_object_spread.min, max = _$_object_spread.max, step = _$_object_spread.step, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, onChange = _$_object_spread.onChange, onStart = _$_object_spread.onStart, onEnd = _$_object_spread.onEnd;
+    var _mergeProps = (0, _mergeprops.mergeProps)(defaultProps, props), className = _mergeProps.className, style = _mergeProps.style, range = _mergeProps.range, disabled = _mergeProps.disabled, button = _mergeProps.button, vertical = _mergeProps.vertical, marks = _mergeProps.marks, minDescription = _mergeProps.minDescription, maxDescription = _mergeProps.maxDescription, currentDescription = _mergeProps.currentDescription, min = _mergeProps.min, max = _mergeProps.max, step = _mergeProps.step, value = _mergeProps.value, defaultValue = _mergeProps.defaultValue, onChange = _mergeProps.onChange, onStart = _mergeProps.onStart, onEnd = _mergeProps.onEnd;
     var rtlClassPrefix = (0, _react.useMemo)(function() {
         return "rtl-".concat(vertical ? verticalClassPrefix : classPrefix);
     }, [
         vertical
     ]);
-    var _useState = (0, _sliced_to_array._)((0, _react.useState)(0), 2), buttonIndex = _useState[0], setButtonIndex = _useState[1];
-    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)('start'), 2), dragStatus = _useState1[0], setDragStatus = _useState1[1];
+    var buttonRef = (0, _react.useRef)(0);
+    var dragStatusRef = (0, _react.useRef)('start');
     var touch = (0, _usetouch.useTouch)();
     var root = (0, _react.useRef)(null);
-    var _useState2 = (0, _sliced_to_array._)((0, _react.useState)([]), 2), marksList = _useState2[0], setMarksList = _useState2[1];
-    var _useState3 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), startValue = _useState3[0], setStartValue = _useState3[1];
+    var rootRect = (0, _react.useRef)(null);
+    var _useState = (0, _sliced_to_array._)((0, _react.useState)([]), 2), marksList = _useState[0], setMarksList = _useState[1];
+    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), startValue = _useState1[0], setStartValue = _useState1[1];
     var scope = (0, _react.useMemo)(function() {
         if (max < min || max === min) {
             console.log('max 的值需要大于 min的值');
@@ -77,10 +77,8 @@ var Range = function Range(props) {
         defaultValue: defaultValue,
         finalValue: 0,
         onChange: handleChange
-    }), 2), current = _usePropsValue[0], setCurrent = _usePropsValue[1];
-    var _useState4 = (0, _sliced_to_array._)((0, _react.useState)(function() {
-        return value || defaultValue || 0;
-    }), 2), exactValue = _useState4[0], setExactValue = _useState4[1];
+    }), 2), innerValue = _usePropsValue[0], setInnerValue = _usePropsValue[1];
+    var exactValueRef = (0, _react.useRef)(value || defaultValue || 0);
     var marksRef = (0, _react.useRef)({});
     (0, _react.useEffect)(function() {
         if (marks) {
@@ -120,11 +118,11 @@ var Range = function Range(props) {
         var verticalClassPrefix = 'nut-range-vertical-mark';
         var lowerBound = min;
         var upperBound = max;
-        if (range && Array.isArray(current)) {
-            lowerBound = current[0];
-            upperBound = current[1];
+        if (range && Array.isArray(innerValue)) {
+            lowerBound = innerValue[0];
+            upperBound = innerValue[1];
         } else {
-            upperBound = current;
+            upperBound = innerValue;
         }
         var isActive = mark <= upperBound && mark >= lowerBound;
         var _$classNames = [
@@ -143,7 +141,7 @@ var Range = function Range(props) {
         min,
         max,
         range,
-        current,
+        innerValue,
         vertical,
         rtl,
         rtlClassPrefix
@@ -153,41 +151,40 @@ var Range = function Range(props) {
     }, [
         range
     ]);
-    var calcMainAxis = (0, _react.useCallback)(function() {
-        var modelVal = current;
+    var calcMainAxis = (0, _react.useMemo)(function() {
+        var modelVal = innerValue;
         return isRange(modelVal) ? "".concat((modelVal[1] - modelVal[0]) * 100 / scope, "%") : "".concat((modelVal - min) * 100 / scope, "%");
     }, [
-        current,
+        innerValue,
         isRange,
         min,
         scope
     ]);
-    var calcOffset = (0, _react.useCallback)(function() {
-        var modelVal = current;
-        return isRange(modelVal) ? "".concat((modelVal[0] - min) * 100 / scope, "%") : "0%";
+    var calcOffset = (0, _react.useMemo)(function() {
+        var modelVal = innerValue;
+        return isRange(modelVal) ? "".concat((modelVal[0] - min) * 100 / scope, "%") : '0%';
     }, [
-        current,
+        innerValue,
         isRange,
         min,
         scope
     ]);
-    var barStyle = (0, _react.useCallback)(function() {
+    var barStyle = (0, _react.useMemo)(function() {
         if (vertical) {
             return {
-                height: calcMainAxis(),
-                top: calcOffset(),
-                transition: dragStatus ? 'none' : undefined
+                height: calcMainAxis,
+                top: calcOffset,
+                transition: dragStatusRef.current ? 'none' : undefined
             };
         }
         var dir = rtl ? 'right' : 'left';
         var _obj;
         return _obj = {
-            width: calcMainAxis()
-        }, (0, _define_property._)(_obj, dir, calcOffset()), (0, _define_property._)(_obj, "transition", dragStatus ? 'none' : undefined), _obj;
+            width: calcMainAxis
+        }, (0, _define_property._)(_obj, dir, calcOffset), (0, _define_property._)(_obj, "transition", dragStatusRef.current ? 'none' : undefined), _obj;
     }, [
         calcMainAxis,
         calcOffset,
-        dragStatus,
         rtl,
         vertical
     ]);
@@ -207,12 +204,12 @@ var Range = function Range(props) {
         vertical
     ]);
     var tickClass = (0, _react.useCallback)(function(mark) {
-        if (range && Array.isArray(current)) {
-            return mark <= current[1] && mark >= current[0];
+        if (range && Array.isArray(innerValue)) {
+            return mark <= innerValue[1] && mark >= innerValue[0];
         }
-        return mark <= current;
+        return mark <= innerValue;
     }, [
-        current,
+        innerValue,
         range
     ]);
     var format = (0, _react.useCallback)(function(value) {
@@ -229,50 +226,53 @@ var Range = function Range(props) {
         } else {
             value = format(value);
         }
-        if (!isSameValue(value, current)) {
-            setCurrent(value);
+        if (!isSameValue(value, innerValue)) {
+            setInnerValue(value);
         }
         end && onEnd && onEnd(value);
     }, [
-        current,
+        innerValue,
         format,
         isRange,
         onEnd,
-        setCurrent
+        setInnerValue
     ]);
-    var click = (0, _react.useCallback)(/*#__PURE__*/ function() {
+    var handleClick = (0, _react.useCallback)(/*#__PURE__*/ function() {
         var _ref = (0, _async_to_generator._)(function(event) {
-            var _event_detail, rect, x, delta, total, _event_detail1, y, value, _current, left, right, middle;
+            var _event_detail, rect, _event_detail_x, x, delta, total, _event_detail1, _event_detail_y, y, value, _innerValue, left, right, middle;
             return (0, _ts_generator._)(this, function(_state) {
                 switch(_state.label){
                     case 0:
-                        if (disabled || !root.current) {
-                            return [
-                                2
-                            ];
-                        }
-                        setDragStatus('');
+                        if (disabled || !root.current) return [
+                            2
+                        ];
+                        // TODO 鸿蒙获取clientX的数据有误，windowX 也变成了 undefined。暂不支持，待上游支持。
+                        if (isHm) return [
+                            2
+                        ];
+                        dragStatusRef.current = '';
                         return [
                             4,
                             (0, _getrect.getRectInMultiPlatform)(root.current)
                         ];
                     case 1:
                         rect = _state.sent();
-                        x = typeof ((_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.x) !== 'undefined' ? event.detail.x : event.clientX;
-                        if (isHm) x = parseFloat((0, _pxtransform.pxTransform)(event.windowX));
+                        x = (_event_detail_x = (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.x) !== null && _event_detail_x !== void 0 ? _event_detail_x : event.clientX;
+                        if (isHm) x = parseFloat((0, _pxtransform.pxTransform)(event.windowX || x));
                         delta = x - rect.left;
                         total = rect.width;
                         if (vertical) {
                             ;
-                            y = typeof ((_event_detail1 = event.detail) === null || _event_detail1 === void 0 ? void 0 : _event_detail1.y) !== 'undefined' ? event.detail.y : event.clientY;
-                            if (isHm) y = parseFloat((0, _pxtransform.pxTransform)(event.windowY));
+                            ;
+                            y = (_event_detail_y = (_event_detail1 = event.detail) === null || _event_detail1 === void 0 ? void 0 : _event_detail1.y) !== null && _event_detail_y !== void 0 ? _event_detail_y : event.clientY;
+                            if (isHm) y = parseFloat((0, _pxtransform.pxTransform)(event.windowY || y));
                             delta = y - rect.top;
                             total = rect.height;
                         }
                         value = min + delta / total * scope;
-                        setExactValue(current);
-                        if (isRange(current)) {
-                            _current = (0, _sliced_to_array._)(current, 2), left = _current[0], right = _current[1];
+                        exactValueRef.current = innerValue;
+                        if (isRange(innerValue)) {
+                            _innerValue = (0, _sliced_to_array._)(innerValue, 2), left = _innerValue[0], right = _innerValue[1];
                             middle = (left + right) / 2;
                             if (value <= middle) {
                                 updateValue([
@@ -298,7 +298,7 @@ var Range = function Range(props) {
             return _ref.apply(this, arguments);
         };
     }(), [
-        current,
+        innerValue,
         disabled,
         isRange,
         min,
@@ -306,20 +306,52 @@ var Range = function Range(props) {
         updateValue,
         vertical
     ]);
+    (0, _taro.useReady)(function() {
+        var getRootRect = /*#__PURE__*/ function() {
+            var _ref = (0, _async_to_generator._)(function() {
+                var rect;
+                return (0, _ts_generator._)(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            if (!root.current) return [
+                                3,
+                                2
+                            ];
+                            return [
+                                4,
+                                (0, _getrect.getRectInMultiPlatform)(root.current)
+                            ];
+                        case 1:
+                            rect = _state.sent();
+                            rootRect.current = rect;
+                            _state.label = 2;
+                        case 2:
+                            return [
+                                2
+                            ];
+                    }
+                });
+            });
+            return function getRootRect() {
+                return _ref.apply(this, arguments);
+            };
+        }();
+        (0, _taro.nextTick)(function() {
+            getRootRect();
+        });
+    });
     var onTouchStart = (0, _react.useCallback)(function(event) {
-        if (disabled) {
-            return;
-        }
+        if (disabled) return;
         touch.start(event);
-        setExactValue(current);
-        if (isRange(current)) {
-            setStartValue(current.map(format));
+        exactValueRef.current = innerValue;
+        if (isRange(innerValue)) {
+            setStartValue(innerValue.map(format));
         } else {
-            setStartValue(format(current));
+            setStartValue(format(innerValue));
         }
-        setDragStatus('start');
+        dragStatusRef.current = 'start';
     }, [
-        current,
+        innerValue,
         disabled,
         format,
         isRange,
@@ -327,61 +359,60 @@ var Range = function Range(props) {
     ]);
     var onTouchMove = (0, _react.useCallback)(/*#__PURE__*/ function() {
         var _ref = (0, _async_to_generator._)(function(event) {
-            var rect, delta, total, diff, newValue;
+            var handleMove;
             return (0, _ts_generator._)(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        // @TODO RN、鸿蒙端垂直滑动时，页面会一同滑动，待解决
-                        if (disabled || !root.current) {
-                            return [
+                // @TODO RN、鸿蒙端垂直滑动时，页面会一同滑动，待解决
+                if (disabled || !root.current) return [
+                    2
+                ];
+                if (dragStatusRef.current === 'start') {
+                    onStart && onStart();
+                    dragStatusRef.current = 'draging';
+                }
+                touch.move(event);
+                handleMove = /*#__PURE__*/ function() {
+                    var _ref = (0, _async_to_generator._)(function() {
+                        var delta, total, diff, newValue;
+                        return (0, _ts_generator._)(this, function(_state) {
+                            if (!rootRect.current) return [
                                 2
                             ];
-                        }
-                        if (dragStatus === 'start') {
-                            onStart && onStart();
-                        }
-                        touch.move(event);
-                        setDragStatus('draging');
-                        return [
-                            4,
-                            (0, _getrect.getRectInMultiPlatform)(root.current)
-                        ];
-                    case 1:
-                        rect = _state.sent();
-                        if (!rect) return [
-                            2
-                        ];
-                        delta = isHm ? parseFloat((0, _pxtransform.pxTransform)(touch.deltaX.current)) : touch.deltaX.current;
-                        total = rect.width;
-                        diff = delta / total * scope;
-                        diff = rtl ? -diff : diff;
-                        if (vertical) {
-                            delta = isHm ? parseFloat((0, _pxtransform.pxTransform)(touch.deltaY.current)) : touch.deltaY.current;
-                            total = rect.height;
+                            delta = isHm ? parseFloat((0, _pxtransform.pxTransform)(touch.deltaX.current)) : touch.deltaX.current;
+                            total = rootRect.current.width;
                             diff = delta / total * scope;
-                        }
-                        if (isRange(startValue)) {
-                            newValue = exactValue.slice();
-                            newValue[buttonIndex] = startValue[buttonIndex] + diff;
-                        } else {
+                            diff = rtl ? -diff : diff;
+                            if (vertical) {
+                                delta = isHm ? parseFloat((0, _pxtransform.pxTransform)(touch.deltaY.current)) : touch.deltaY.current;
+                                total = rootRect.current.height;
+                                diff = delta / total * scope;
+                            }
                             newValue = startValue + diff;
-                        }
-                        setExactValue(newValue);
-                        updateValue(newValue);
-                        return [
-                            2
-                        ];
-                }
+                            if (isRange(startValue)) {
+                                newValue = exactValueRef.current.slice();
+                                newValue[buttonRef.current] = startValue[buttonRef.current] + diff;
+                            }
+                            exactValueRef.current = newValue;
+                            updateValue(newValue);
+                            return [
+                                2
+                            ];
+                        });
+                    });
+                    return function handleMove() {
+                        return _ref.apply(this, arguments);
+                    };
+                }();
+                requestAnimationFrame(handleMove);
+                return [
+                    2
+                ];
             });
         });
         return function(event) {
             return _ref.apply(this, arguments);
         };
     }(), [
-        buttonIndex,
         disabled,
-        dragStatus,
-        exactValue,
         isRange,
         onStart,
         rtl,
@@ -392,38 +423,23 @@ var Range = function Range(props) {
         vertical
     ]);
     var onTouchEnd = (0, _react.useCallback)(function() {
-        if (disabled) {
-            return;
+        if (disabled) return;
+        if (dragStatusRef.current === 'draging') {
+            updateValue(innerValue, true);
         }
-        if (dragStatus === 'draging') {
-            updateValue(current, true);
-        }
-        setDragStatus('');
+        dragStatusRef.current = '';
     }, [
-        current,
+        innerValue,
         disabled,
-        dragStatus,
         updateValue
     ]);
     var curValue = (0, _react.useCallback)(function(idx) {
-        var modelVal = current;
+        var modelVal = innerValue;
         var value = typeof idx === 'number' ? modelVal[idx] : modelVal;
         return value;
     }, [
-        current
+        innerValue
     ]);
-    var buttonTransform = (0, _react.useMemo)(function() {
-        var borderRadis = {
-            borderRadius: (0, _pxtransform.pxTransform)(13)
-        };
-        var transform = {
-            transform: 'translate(-50%, -50%)'
-        };
-        if (isHm) {
-            return (0, _object_spread._)({}, borderRadis, transform);
-        }
-        return (0, _object_spread._)({}, transform);
-    }, []);
     var buttonNumberTransform = (0, _react.useMemo)(function() {
         return vertical ? 'translate(100%, -50%)' : 'translate(-50%, -100%)';
     }, [
@@ -431,21 +447,20 @@ var Range = function Range(props) {
     ]);
     var renderButton = (0, _react.useCallback)(function(index) {
         var _obj, _obj1;
-        return /*#__PURE__*/ _react.default.createElement(_components.View, null, button || /*#__PURE__*/ _react.default.createElement(_components.View, {
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, button || /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: (0, _classnames.default)("".concat(classPrefix, "-button"), (_obj = {}, (0, _define_property._)(_obj, "".concat(verticalClassPrefix, "-button"), vertical), (0, _define_property._)(_obj, "".concat(rtlClassPrefix, "-button"), rtl), _obj)),
-            // @ts-ignore
-            style: buttonTransform
+            style: {
+                transform: 'translate(-50%, -50%)'
+            }
         }, currentDescription !== null && /*#__PURE__*/ _react.default.createElement(_components.Text, {
             className: (0, _classnames.default)("".concat(classPrefix, "-button-number"), (_obj1 = {}, (0, _define_property._)(_obj1, "".concat(verticalClassPrefix, "-button-number"), vertical), (0, _define_property._)(_obj1, "".concat(rtlClassPrefix, "-button-number"), rtl), _obj1)),
             style: {
-                // @ts-ignore
                 transform: buttonNumberTransform
             }
         }, currentDescription ? currentDescription(curValue(index)) : curValue(index))));
     }, [
         button,
         buttonNumberTransform,
-        buttonTransform,
         curValue,
         currentDescription,
         rtl,
@@ -481,42 +496,22 @@ var Range = function Range(props) {
         tickClass,
         vertical
     ]);
-    var wrapperTransform = (0, _react.useMemo)(function() {
-        // @TODO 支持变量
-        var wrapperTransformRN = [
-            {
-                translateX: (0, _pxtransform.pxTransform)(vertical ? -12 : -13)
-            },
-            {
-                translateY: (0, _pxtransform.pxTransform)(-12)
-            }
-        ];
-        var wrapperTransform = 'translate(-50%, -50%)';
-        return wrapperTransform;
-    }, [
-        vertical
-    ]);
-    var rangeWrapperTransform = (0, _react.useMemo)(function() {
-        return 'translate(-50%, -50%)';
-    }, []);
     var renderRangeButton = (0, _react.useCallback)(function() {
         return [
             0,
             1
-        ].map(function(item, index) {
-            var isLeft = index === 0;
-            var suffix = isLeft ? 'left' : 'right';
+        ].map(function(_, index) {
+            var suffix = index === 0 ? 'left' : 'right';
             var _obj;
             var cls = (0, _classnames.default)("".concat(classPrefix, "-button-wrapper-").concat(suffix), (_obj = {}, (0, _define_property._)(_obj, "".concat(verticalClassPrefix, "-button-wrapper-").concat(suffix), vertical), (0, _define_property._)(_obj, "".concat(rtlClassPrefix, "-button-wrapper-").concat(suffix), rtl), _obj));
             return /*#__PURE__*/ _react.default.createElement(_components.View, {
                 key: index,
                 className: cls,
                 style: {
-                    // @ts-ignore
-                    transform: rangeWrapperTransform
+                    transform: 'translate(-50%, -50%)'
                 },
                 onTouchStart: function onTouchStart1(e) {
-                    setButtonIndex(index);
+                    buttonRef.current = index;
                     onTouchStart(e);
                 },
                 onTouchMove: onTouchMove,
@@ -532,7 +527,6 @@ var Range = function Range(props) {
         onTouchMove,
         onTouchStart,
         renderButton,
-        rangeWrapperTransform,
         vertical,
         rtl,
         rtlClassPrefix
@@ -542,8 +536,7 @@ var Range = function Range(props) {
             catchMove: true,
             className: (0, _classnames.default)("".concat(classPrefix, "-button-wrapper"), (0, _define_property._)({}, "".concat(verticalClassPrefix, "-button-wrapper"), vertical)),
             style: {
-                // @ts-ignore
-                transform: wrapperTransform
+                transform: 'translate(-50%, -50%)'
             },
             onTouchStart: onTouchStart,
             onTouchMove: onTouchMove,
@@ -558,18 +551,18 @@ var Range = function Range(props) {
         onTouchMove,
         onTouchStart,
         renderButton,
-        wrapperTransform,
         vertical
     ]);
     var renderButtonWrapper = (0, _react.useCallback)(function() {
-        if (range) {
-            return renderRangeButton();
-        }
-        return renderSingleButton();
+        return /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: "".concat(classPrefix, "-bar ").concat(isHm ? '' : "".concat(classPrefix, "-bar-animate"), "}"),
+            style: barStyle
+        }, range ? renderRangeButton() : renderSingleButton());
     }, [
         renderRangeButton,
         renderSingleButton,
-        range
+        range,
+        barStyle
     ]);
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: containerClasses,
@@ -579,13 +572,8 @@ var Range = function Range(props) {
     }, minDescription || min), /*#__PURE__*/ _react.default.createElement(_components.View, {
         ref: root,
         className: classes,
-        onClick: function onClick(e) {
-            return click(e);
-        }
-    }, renderMarks(), /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "".concat(classPrefix, "-bar"),
-        style: barStyle()
-    }, renderButtonWrapper())), maxDescription !== null && /*#__PURE__*/ _react.default.createElement(_components.Text, {
+        onClick: handleClick
+    }, renderMarks(), renderButtonWrapper()), maxDescription !== null && /*#__PURE__*/ _react.default.createElement(_components.Text, {
         className: "".concat(classPrefix, "-max")
     }, maxDescription || max));
 };

package/dist/cjs/packages/range/style/range.scss

@@ -46,7 +46,10 @@
     max-height: 100%;
     background: $range-active-color;
     border-radius: 2px;
-    transition: all 0.2s;
+
+    &-animate {
+      transition: all 0.2s;
+    }
   }
 
   &-button {
@@ -204,7 +207,8 @@
     position: absolute;
     width: 36px;
     height: 100%;
-    top: initial;
+    // top: initial;
+    top: 0px;
     right: 50%;
     overflow: visible;
     font-size: 12px;

package/dist/cjs/packages/range/style/style.css

@@ -45,6 +45,8 @@
   max-height: 100%;
   background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
   border-radius: 2px;
+}
+.nut-range-bar-animate {
   transition: all 0.2s;
 }
 .nut-range-button {
@@ -173,7 +175,7 @@
   position: absolute;
   width: 36px;
   height: 100%;
-  top: initial;
+  top: 0px;
   right: 50%;
   overflow: visible;
   font-size: 12px;