@nutui/nutui-react 2.0.0-alpha.6 → 2.0.0-alpha.8

package/dist/nutui.react.mjs

@@ -6,7 +6,7 @@ var __publicField = (obj, key, value) => {
 };
 var _a;
 /*!
-* @nutui/nutui-react v2.0.0-alpha.6 Fri May 12 2023 15:13:32 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.8 Fri May 12 2023 19:07:24 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -7525,7 +7525,7 @@ const useIsMounted = () => {
   }, []);
   return isMounted;
 };
-function useForceUpdate() {
+function useForceUpdate$1() {
   const update2 = useState()[1];
   const isMounted = useIsMounted();
   return () => {
@@ -7786,7 +7786,7 @@ const withAnimated = (Component2, host2) => {
       instanceRef.current = updateRef(givenRef, value);
     }, [givenRef]);
     const [props, deps] = getAnimatedState(givenProps, host2);
-    const forceUpdate = useForceUpdate();
+    const forceUpdate = useForceUpdate$1();
     const callback = () => {
       const instance = instanceRef.current;
       if (hasInstance && !instance) {
@@ -9441,7 +9441,7 @@ function useSprings(length, props, deps) {
     deps = [];
   const ref = useMemo(() => propsFn || arguments.length == 3 ? SpringRef() : void 0, []);
   const layoutId = useRef(0);
-  const forceUpdate = useForceUpdate();
+  const forceUpdate = useForceUpdate$1();
   const state = useMemo(() => ({
     ctrls: [],
     queue: [],
@@ -12482,6 +12482,10 @@ function requestAniFrame() {
   }
 }
 const requestAniFrame$1 = requestAniFrame();
+function useForceUpdate() {
+  const [, updateState] = React__default.useState();
+  return React__default.useCallback(() => updateState({}), []);
+}
 const defaultProps$15 = {
   ...ComponentDefaults,
   tabStyle: {},
@@ -12569,15 +12573,20 @@ const Tabs = (props) => {
     return titles2;
   };
   const titles = useRef(getTitles());
+  const forceUpdate = useForceUpdate();
   useEffect(() => {
     titles.current = getTitles();
     let current = "";
     titles.current.forEach((title2) => {
-      if (title2.value === value) {
+      if (title2.value == value) {
         current = value;
       }
     });
-    setValue(current);
+    if (current !== "" && current !== value) {
+      setValue(current);
+    } else {
+      forceUpdate();
+    }
   }, [children]);
   const classes = classNames(
     classPrefix$a,
@@ -12594,14 +12603,16 @@ const Tabs = (props) => {
     background: activeType === "line" ? activeColor : ""
   };
   useEffect(() => {
-    const index = titles.current.findIndex((t) => t.value === value);
+    const index = titles.current.findIndex((t) => t.value == value);
     setContentStyle({
       transform: direction === "horizontal" ? `translate3d(-${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
       transitionDuration: `${duration}ms`
     });
-    scrollIntoView(index);
+    setTimeout(() => {
+      scrollIntoView(index);
+    });
   }, [value]);
-  const tabChange = (item, index) => {
+  const tabChange = (item) => {
     onClick && onClick(item.value);
     if (item.disabled) {
       return;
@@ -12609,11 +12620,11 @@ const Tabs = (props) => {
     setValue(item.value);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes, ...rest, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classesTitle, style: { ...tabStyle }, ref: navRef, children: !!title && typeof title === "function" ? title() : titles.current.map((item, index) => {
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classesTitle, style: { ...tabStyle }, ref: navRef, children: !!title && typeof title === "function" ? title() : titles.current.map((item) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
-          onClick: (e) => {
+          onClick: () => {
             tabChange(item);
           },
           className: classNames(`${classPrefix$a}__titles-item`, {
@@ -14462,7 +14473,6 @@ const defaultProps$_ = {
   popup: true,
   visible: false,
   options: [],
-  value: [],
   title: "",
   optionKey: { textKey: "text", valueKey: "value", childrenKey: "children" },
   format: {},
@@ -14477,8 +14487,7 @@ const defaultProps$_ = {
   onChange: () => {
   },
   onPathChange: () => {
-  },
-  ...Popup.defaultProps
+  }
 };
 const InternalCascader = (props, ref) => {
   const {
@@ -14488,6 +14497,7 @@ const InternalCascader = (props, ref) => {
     visible,
     options: options2,
     value,
+    defaultValue,
     title,
     optionKey: optionKey2,
     format: format2,
@@ -14503,6 +14513,15 @@ const InternalCascader = (props, ref) => {
   const [tabvalue, setTabvalue] = useState("c1");
   const [optionsData, setOptionsData] = useState([]);
   const isLazy = () => state.configs.lazy && Boolean(state.configs.onLoad);
+  const [innerValue, setInnerValue] = usePropsValue({
+    value,
+    defaultValue,
+    finalValue: defaultValue,
+    onChange: (val) => {
+      var _a2;
+      (_a2 = props.onChange) == null ? void 0 : _a2.call(props, val);
+    }
+  });
   const [state] = useState({
     optionsData: [],
     panes: [
@@ -14512,7 +14531,6 @@ const InternalCascader = (props, ref) => {
         paneKey: ""
       }
     ],
-    innerValue: value,
     tree: new Tree$1([], {}),
     tabsCursor: 0,
     // 选中的tab项
@@ -14532,12 +14550,12 @@ const InternalCascader = (props, ref) => {
   });
   useEffect(() => {
     initData();
-  }, [options2]);
+  }, [options2, format2]);
   useEffect(() => {
-    if (value !== state.innerValue) {
-      state.innerValue = value;
+    if (defaultValue && defaultValue !== innerValue) {
+      setInnerValue(defaultValue);
     }
-  }, [value]);
+  }, [defaultValue]);
   const initData = async () => {
     state.lazyLoadMap.clear();
     if (format2 && Object.keys(format2).length > 0) {
@@ -14572,24 +14590,24 @@ const InternalCascader = (props, ref) => {
     setOptionsData(state.panes);
   };
   const syncValue = async () => {
-    const currentValue2 = state.innerValue;
-    if (currentValue2 === void 0 || !state.tree.nodes.length) {
+    const currentValue = innerValue;
+    if (currentValue === void 0 || currentValue !== defaultValue || !state.tree.nodes.length) {
       return;
     }
-    if (currentValue2.length === 0) {
+    if (currentValue.length === 0) {
       state.tabsCursor = 0;
       return;
     }
-    let needToSync = currentValue2;
-    if (isLazy() && Array.isArray(currentValue2) && currentValue2.length) {
+    let needToSync = currentValue;
+    if (isLazy() && Array.isArray(currentValue) && currentValue.length) {
       needToSync = [];
       const parent = state.tree.nodes.find(
-        (node) => node.value === currentValue2[0]
+        (node) => node.value === currentValue[0]
       );
       if (parent) {
         needToSync = [parent.value];
         state.initLoading = true;
-        const last = await currentValue2.slice(1).reduce(async (p, value2) => {
+        const last = await currentValue.slice(1).reduce(async (p, value2) => {
           var _a2;
           const parent2 = await p;
           await invokeLazyLoad(parent2);
@@ -14605,7 +14623,7 @@ const InternalCascader = (props, ref) => {
         state.initLoading = false;
       }
     }
-    if (needToSync.length && currentValue2 === value) {
+    if (needToSync.length && currentValue === defaultValue) {
       const pathNodes = state.tree.getPathNodesByValue(needToSync);
       pathNodes.forEach((node, index) => {
         state.tabsCursor = index;
@@ -14662,6 +14680,7 @@ const InternalCascader = (props, ref) => {
         const optionParams = pathNodes.map((item) => item.value);
         onChange(optionParams, pathNodes);
         onPathChange(optionParams, pathNodes);
+        setInnerValue(optionParams);
       }
       setOptionsData(state.panes);
       close();
@@ -18433,475 +18452,167 @@ const Radio = (props) => {
 Radio.defaultProps = defaultProps$N;
 Radio.displayName = "NutRadio";
 Radio.RadioGroup = RadioGroup;
-const fullClone = {
-  ...ReactDOM
+const defaultProps$M = {
+  ...ComponentDefaults,
+  range: false,
+  min: 0,
+  max: 100,
+  step: 1,
+  vertical: false,
+  marks: {}
 };
-const { version, render: reactRender, unmountComponentAtNode } = fullClone;
-let createRoot;
-try {
-  const mainVersion = Number((version || "").split(".")[0]);
-  if (mainVersion >= 18 && fullClone.createRoot) {
-    createRoot = fullClone.createRoot;
-  }
-} catch (e) {
-}
-function toggleWarning(skip) {
-  const { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } = fullClone;
-  if (__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED && typeof __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === "object") {
-    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = skip;
-  }
-}
-const MARK = "__nutui_react_root__";
-function legacyRender(node, container) {
-  reactRender(node, container);
-}
-function concurrentRender(node, container) {
-  toggleWarning(true);
-  const root2 = container[MARK] || createRoot(container);
-  toggleWarning(false);
-  root2.render(node);
-  container[MARK] = root2;
-}
-function render(node, container) {
-  if (createRoot) {
-    concurrentRender(node, container);
-    return;
-  }
-  legacyRender(node, container);
-}
-function legacyUnmount(container) {
-  return unmountComponentAtNode(container);
-}
-async function concurrentUnmount(container) {
-  return Promise.resolve().then(() => {
-    var _a2;
-    (_a2 = container[MARK]) == null ? void 0 : _a2.unmount();
-    delete container[MARK];
+const Range = (props) => {
+  const {
+    className,
+    range: range3,
+    disabled,
+    button,
+    vertical,
+    marks,
+    onChange,
+    onStart,
+    onEnd,
+    minDescription,
+    maxDescription,
+    currentDescription,
+    min,
+    max,
+    step,
+    value,
+    defaultValue
+  } = { ...defaultProps$M, ...props };
+  const classPrefix2 = "nut-range";
+  const [buttonIndex, setButtonIndex] = useState(0);
+  const [dragStatus, setDragStatus] = useState("start");
+  const touch = useTouch();
+  const root2 = useRef(null);
+  const [marksList, setMarksList] = useState([]);
+  const [startValue, setStartValue] = useState(0);
+  const handleChange = (value2) => {
+    onChange && onChange(value2);
+  };
+  const [current, setCurrent] = usePropsValue({
+    value,
+    defaultValue,
+    finalValue: 0,
+    onChange: handleChange
   });
-}
-function unmount(container) {
-  if (createRoot) {
-    return concurrentUnmount(container);
-  }
-  return legacyUnmount(container);
-}
-let Notification$1 = (_a = class extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    __publicField(this, "closeTimer");
-    this.close = this.close.bind(this);
-    this.startCloseTimer = this.startCloseTimer.bind(this);
-    this.clearCloseTimer = this.clearCloseTimer.bind(this);
-    this.close = this.close.bind(this);
-    this.clickCover = this.clickCover.bind(this);
-  }
-  close() {
-    this.clearCloseTimer();
-    this.props.onClose();
-  }
-  startCloseTimer() {
-    const { duration } = this.props;
-    if (duration) {
-      this.closeTimer = window.setTimeout(() => {
-        this.close();
-      }, duration * 1e3);
+  const [exactValue, setEaxctValue] = useState(
+    () => value || defaultValue || 0
+  );
+  useEffect(() => {
+    if (marks) {
+      const marksKeys = Object.keys(marks);
+      const list = marksKeys.map(parseFloat).sort((a2, b) => a2 - b).filter((point) => point >= min && point <= max);
+      setMarksList(list);
     }
-  }
-  clearCloseTimer() {
-    if (this.closeTimer) {
-      clearTimeout(this.closeTimer);
-      this.closeTimer = -1;
+  }, [marks]);
+  const scope = () => {
+    return max - min;
+  };
+  const classes = classNames(classPrefix2, {
+    [`${classPrefix2}-disabled`]: disabled,
+    [`${classPrefix2}-vertical`]: vertical
+  });
+  const containerClasses = classNames(`${classPrefix2}-container`, className, {
+    [`${classPrefix2}-container-vertical`]: vertical
+  });
+  const markClassName = useCallback(
+    (mark) => {
+      const classPrefix22 = "nut-range-mark";
+      let lowerBound = min;
+      let upperBound = max;
+      if (range3 && Array.isArray(current)) {
+        lowerBound = current[0];
+        upperBound = current[1];
+      } else {
+        upperBound = current;
+      }
+      const isActive = mark <= upperBound && mark >= lowerBound;
+      return [
+        `${classPrefix22}-text`,
+        `${isActive ? `${classPrefix22}-text-active` : ""}`
+      ].join(" ");
+    },
+    [range3, current, min, max]
+  );
+  const isRange = (val) => {
+    return !!range3 && Array.isArray(val);
+  };
+  const calcMainAxis = () => {
+    const modelVal = current;
+    if (isRange(modelVal)) {
+      return `${(modelVal[1] - modelVal[0]) * 100 / scope()}%`;
     }
-  }
-  clickCover() {
-    const { closeOnClickOverlay } = this.props;
-    if (closeOnClickOverlay) {
-      this.close();
+    return `${(modelVal - min) * 100 / scope()}%`;
+  };
+  const calcOffset = () => {
+    const modelVal = current;
+    if (isRange(modelVal)) {
+      return `${(modelVal[0] - min) * 100 / scope()}%`;
     }
-  }
-  componentDidMount() {
-    this.startCloseTimer();
-  }
-  componentWillUnmount() {
-    this.clearCloseTimer();
-  }
-  render() {
-    const {
-      id,
-      style,
-      icon,
-      title,
-      msg,
-      bottom,
-      center,
-      bgColor,
-      coverColor,
-      textAlignCenter,
-      size,
-      customClass,
-      cover,
-      type: type4
-    } = this.props;
-    const toastBem = cn("toast");
-    const classes = classNames({
-      "nut-toast-center": center,
-      "nut-toast-has-icon": icon,
-      "nut-toast-cover": cover,
-      "nut-toast-loading": type4 === "loading",
-      [`${customClass}`]: true,
-      [`nut-toast-${size}`]: true
-    });
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        className: `${toastBem()} ${classes}`,
-        id: `toast-${id}`,
-        style: {
-          bottom: center ? "auto" : `${bottom}`,
-          backgroundColor: cover ? coverColor : "",
-          ...style
-        },
-        onClick: () => {
-          this.clickCover();
-        },
-        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "div",
-          {
-            className: toastBem("inner"),
-            style: {
-              textAlign: textAlignCenter ? "center" : "left",
-              backgroundColor: bgColor
-            },
-            children: [
-              icon ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: toastBem("icon-wrapper"), children: icon }) : null,
-              title ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "nut-toast-title", children: title }) : null,
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: toastBem("text"), children: msg })
-            ]
-          }
-        )
-      }
-    ) });
-  }
-}, __publicField(_a, "newInstance"), _a);
-Notification$1.newInstance = (properties, callback) => {
-  const element = document.createElement("div");
-  if (properties.id) {
-    element.setAttribute("id", `${properties.id}`);
-  }
-  document.body.appendChild(element);
-  let called = false;
-  function ref(instance) {
-    if (called) {
-      return;
-    }
-    called = true;
-    callback({
-      component: instance,
-      destroy() {
-        unmount(element);
-        element && element.parentNode && element.parentNode.removeChild(element);
-      }
-    });
-  }
-  render(/* @__PURE__ */ jsxRuntimeExports.jsx(Notification$1, { ...properties, ref }), element);
-};
-let messageInstance$1 = null;
-const options$1 = {
-  msg: "",
-  id: "",
-  style: {},
-  duration: 1.5,
-  // 时长,duration为0则一直展示
-  center: true,
-  // toast是否居中展示
-  type: "text",
-  title: "",
-  customClass: "",
-  // 自定义样式名
-  bottom: "30px",
-  // center为false时生效，距离底部位置
-  size: "base",
-  // 设置字体大小，默认base,可选large\small\base
-  icon: null,
-  iconSize: "20",
-  textAlignCenter: true,
-  // 文字是否居中显示,true为居中，false为left
-  loadingRotate: true,
-  // 未实现
-  bgColor: "rgba(0, 0, 0, .8)",
-  onClose: () => {
-  },
-  cover: false,
-  // 是否展示透明遮罩层
-  coverColor: "rgba(0, 0, 0, 0)",
-  // 遮罩颜色设定
-  closeOnClickOverlay: false
-  // 是否点击遮罩可关闭
-};
-function getInstance$1(props, callback) {
-  if (messageInstance$1) {
-    messageInstance$1.destroy();
-    messageInstance$1 = null;
-  }
-  Notification$1.newInstance(props, (notification) => {
-    return callback && callback(notification);
-  });
-}
-function notice$1(opts) {
-  function close() {
-    if (messageInstance$1) {
-      messageInstance$1.destroy();
-      messageInstance$1 = null;
-    }
-  }
-  const opts2 = { ...options$1, ...opts, onClose: close };
-  getInstance$1(opts2, (notification) => {
-    messageInstance$1 = notification;
-  });
-}
-const errorMsg$1 = (msg) => {
-  if (!msg) {
-    console.warn("[NutUI Toast]: msg cannot be null");
-  }
-};
-const Toast = {
-  text(msg, option = {}) {
-    errorMsg$1(msg);
-    return notice$1({ msg, type: "text", ...option });
-  },
-  success(msg, option = {}) {
-    errorMsg$1(msg);
-    return notice$1({ msg, icon: "success", type: "success", ...option });
-  },
-  fail(msg, option = {}) {
-    errorMsg$1(msg);
-    return notice$1({ msg, icon: "failure", type: "fail", ...option });
-  },
-  loading(msg, option = {}) {
-    errorMsg$1(msg);
-    return notice$1({ msg, icon: /* @__PURE__ */ jsxRuntimeExports.jsx(k$3, {}), type: "loading", ...option });
-  },
-  warn(msg, option = {}) {
-    errorMsg$1(msg);
-    return notice$1({ msg, icon: "tips", type: "warn", ...option });
-  },
-  customIcon(msg, option = {}) {
-    errorMsg$1(msg);
-    return notice$1({ msg, ...option });
-  },
-  hide() {
-    if (messageInstance$1) {
-      messageInstance$1.destroy();
-      messageInstance$1 = null;
-    }
-  }
-};
-const defaultProps$M = {
-  range: false,
-  hiddenRange: false,
-  hiddenTag: false,
-  min: 0,
-  max: 100,
-  step: 1,
-  modelValue: 0,
-  vertical: false,
-  marks: {}
-};
-let startValue;
-let currentValue;
-const Range = (props) => {
-  const { locale } = useConfig();
-  const {
-    className,
-    range: range3,
-    disabled,
-    activeColor,
-    inactiveColor,
-    buttonColor,
-    hiddenRange,
-    hiddenTag,
-    modelValue,
-    button,
-    vertical,
-    marks,
-    dragStart,
-    dragEnd,
-    onChange,
-    onDragStart,
-    onDragEnd,
-    minDesc,
-    maxDesc,
-    curValueDesc
-  } = { ...defaultProps$M, ...props };
-  let { min, max, step } = { ...defaultProps$M, ...props };
-  min = Number(min);
-  max = Number(max);
-  step = Number(step);
-  const [buttonIndex, SetButtonIndex] = useState(0);
-  const [initValue, SetInitValue] = useState();
-  const [dragStatus, SetDragStatus] = useState("start");
-  const touch = useTouch();
-  const root2 = useRef(null);
-  const [marksList, SetMarksList] = useState([]);
-  useEffect(() => {
-    if (typeof modelValue === "number") {
-      if (!range3 && (modelValue < min || modelValue > max)) {
-        SetInitValue(0);
-        Toast.text(`${modelValue} ${locale.range.rangeText}`);
-        return;
-      }
-      SetInitValue(modelValue);
-    }
-  }, [modelValue]);
-  useEffect(() => {
-    if (marks) {
-      const marksKeys = Object.keys(marks);
-      const list = marksKeys.map(parseFloat).sort((a2, b) => a2 - b).filter((point) => point >= min && point <= max);
-      SetMarksList(list);
-    }
-  }, [marks]);
-  const scope = () => {
-    return Number(max) - Number(min);
-  };
-  const classes = useCallback(() => {
-    const prefixCls2 = "nut-range";
-    return [
-      prefixCls2,
-      `${disabled ? `${prefixCls2}-disabled` : ""}`,
-      `${vertical ? `${prefixCls2}-vertical` : ""}`,
-      `${!hiddenRange ? `${prefixCls2}-show-number` : ""}`
-    ].filter(Boolean).join(" ");
-  }, [disabled, vertical, hiddenRange]);
-  const containerClasses = useCallback(() => {
-    const prefixCls2 = "nut-range-container";
-    return [prefixCls2, `${vertical ? `${prefixCls2}-vertical` : ""}`, className].filter(Boolean).join(" ");
-  }, [vertical, className]);
-  const markClassName = useCallback(
-    (mark) => {
-      const classPrefix2 = "nut-range-mark";
-      let lowerBound = Number(min);
-      let upperBound = Number(max);
-      if (range3) {
-        const [left, right] = modelValue;
-        lowerBound = left;
-        upperBound = right;
-      } else {
-        upperBound = modelValue;
-      }
-      const isActive = mark <= upperBound && mark >= lowerBound;
-      return [
-        `${classPrefix2}-text`,
-        `${isActive ? `${classPrefix2}-text-active` : ""}`
-      ].filter(Boolean).join(" ");
-    },
-    [range3, modelValue, min, max]
-  );
-  const [rangeName, setRangeName] = useState(classes());
-  const [containerName, setContainerName] = useState(containerClasses());
-  useEffect(() => {
-    setRangeName(classes());
-    setContainerName(containerClasses());
-  }, [classes, containerClasses]);
-  const wrapperStyle = () => {
-    return {
-      background: inactiveColor
-    };
-  };
-  const buttonStyle = () => {
-    return {
-      borderColor: buttonColor
-    };
-  };
-  const isRange = (val) => {
-    return !!range3 && Array.isArray(val);
-  };
-  const calcMainAxis = () => {
-    const modelVal = initValue || initValue === 0 ? initValue : modelValue;
-    if (isRange(modelVal)) {
-      return `${(modelVal[1] - modelVal[0]) * 100 / scope()}%`;
-    }
-    return `${(modelVal - Number(min)) * 100 / scope()}%`;
-  };
-  const calcOffset = () => {
-    const modelVal = initValue || initValue === 0 ? initValue : modelValue;
-    if (isRange(modelVal)) {
-      return `${(modelVal[0] - Number(min)) * 100 / scope()}%`;
-    }
-    return `0%`;
-  };
-  const barStyle = () => {
-    if (vertical) {
-      return {
-        height: calcMainAxis(),
-        top: calcOffset(),
-        background: activeColor,
-        transition: dragStatus ? "none" : void 0
-      };
+    return `0%`;
+  };
+  const barStyle = () => {
+    if (vertical) {
+      return {
+        height: calcMainAxis(),
+        top: calcOffset(),
+        transition: dragStatus ? "none" : void 0
+      };
     }
     return {
       width: calcMainAxis(),
       left: calcOffset(),
-      background: activeColor,
       transition: dragStatus ? "none" : void 0
     };
   };
   const marksStyle = (mark) => {
     let style = {
-      left: `${(mark - Number(min)) / scope() * 100}%`
+      left: `${(mark - min) / scope() * 100}%`
     };
     if (vertical) {
       style = {
-        top: `${(mark - Number(min)) / scope() * 100}%`
+        top: `${(mark - min) / scope() * 100}%`
       };
     }
     return style;
   };
-  const tickStyle = (mark) => {
-    let lowerBound = Number(min);
-    let upperBound = Number(max);
-    if (range3) {
-      const [left, right] = modelValue;
-      lowerBound = left;
-      upperBound = right;
+  const tickClass = (mark) => {
+    if (range3 && Array.isArray(current)) {
+      return mark <= current[1] && mark >= current[0];
     }
-    const isActive = mark <= upperBound && mark >= lowerBound;
-    const style = {
-      background: !isActive ? inactiveColor : activeColor
-    };
-    return style;
+    return mark <= current;
   };
-  const format2 = (value) => {
-    value = Math.max(+min, Math.min(value, +max));
-    return Math.round(value / +step) * +step;
+  const format2 = (value2) => {
+    value2 = Math.max(+min, Math.min(value2, +max));
+    return Math.round(value2 / +step) * +step;
   };
   const isSameValue = (newValue, oldValue) => {
     return JSON.stringify(newValue) === JSON.stringify(oldValue);
   };
-  const handleOverlap = (value) => {
-    if (value[0] > value[1]) {
-      return value.slice(0).reverse();
+  const handleOverlap = (value2) => {
+    if (value2[0] > value2[1]) {
+      return value2.slice(0).reverse();
     }
-    return value;
+    return value2;
   };
-  const updateValue = (value, end) => {
-    if (isRange(value)) {
-      value = handleOverlap(value).map(format2);
+  const updateValue = (value2, end) => {
+    if (isRange(value2)) {
+      value2 = handleOverlap(value2).map(format2);
     } else {
-      value = format2(value);
-    }
-    const modelVal = initValue || initValue === 0 ? initValue : modelValue;
-    if (!isSameValue(value, modelVal)) {
-      SetInitValue(value);
+      value2 = format2(value2);
     }
-    if ((marks || end) && !isSameValue(value, startValue)) {
-      onChange && onChange(value);
+    if (!isSameValue(value2, current)) {
+      setCurrent(value2);
     }
+    end && onEnd && onEnd(value2);
   };
   const click = (event) => {
     if (disabled || !root2.current) {
       return;
     }
-    SetDragStatus("");
+    setDragStatus("");
     const rect = getRect(root2.current);
     let delta = event.clientX - rect.left;
     let total = rect.width;
@@ -18909,18 +18620,18 @@ const Range = (props) => {
       delta = event.clientY - rect.top;
       total = rect.height;
     }
-    const value = Number(min) + delta / total * scope();
-    currentValue = initValue || initValue === 0 ? initValue : modelValue;
-    if (isRange(currentValue)) {
-      const [left, right] = currentValue;
+    const value2 = min + delta / total * scope();
+    setEaxctValue(current);
+    if (isRange(current)) {
+      const [left, right] = current;
       const middle = (left + right) / 2;
-      if (value <= middle) {
-        updateValue([value, right], true);
+      if (value2 <= middle) {
+        updateValue([value2, right], true);
       } else {
-        updateValue([left, value], true);
+        updateValue([left, value2], true);
       }
     } else {
-      updateValue(value, true);
+      updateValue(value2, true);
     }
   };
   const onTouchStart = (event) => {
@@ -18928,24 +18639,24 @@ const Range = (props) => {
       return;
     }
     touch.start(event);
-    currentValue = initValue || initValue === 0 ? initValue : modelValue;
-    if (isRange(currentValue)) {
-      startValue = currentValue.map(format2);
+    setEaxctValue(current);
+    if (isRange(current)) {
+      setStartValue(current.map(format2));
     } else {
-      startValue = format2(currentValue);
+      setStartValue(format2(current));
     }
-    SetDragStatus("start");
+    setDragStatus("start");
   };
   const onTouchMove = (event) => {
+    event.stopPropagation();
     if (disabled || !root2.current) {
       return;
     }
     if (dragStatus === "start") {
-      dragStart && dragStart();
-      onDragStart && onDragStart();
+      onStart && onStart();
     }
     touch.move(event);
-    SetDragStatus("draging");
+    setDragStatus("draging");
     const rect = getRect(root2.current);
     let delta = touch.deltaX;
     let total = rect.width;
@@ -18955,121 +18666,91 @@ const Range = (props) => {
       total = rect.height;
       diff = delta / total * scope();
     }
+    let newValue;
     if (isRange(startValue)) {
-      currentValue[buttonIndex] = startValue[buttonIndex] + diff;
+      newValue = exactValue.slice();
+      newValue[buttonIndex] = startValue[buttonIndex] + diff;
     } else {
-      currentValue = startValue + diff;
+      newValue = startValue + diff;
     }
-    updateValue(currentValue);
+    setEaxctValue(newValue);
+    updateValue(newValue);
   };
   const onTouchEnd = (event) => {
     if (disabled) {
       return;
     }
     if (dragStatus === "draging") {
-      updateValue(currentValue, true);
-      dragEnd && dragEnd();
-      onDragEnd && onDragEnd();
+      updateValue(current, true);
     }
-    SetDragStatus("");
+    setDragStatus("");
   };
   const curValue = (idx) => {
-    const modelVal = initValue || initValue === 0 ? initValue : modelValue;
-    const value = typeof idx === "number" ? modelVal[idx] : modelVal;
-    return value;
+    const modelVal = current;
+    const value2 = typeof idx === "number" ? modelVal[idx] : modelVal;
+    return value2;
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${containerName}`, children: [
-    !hiddenRange ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min", children: minDesc || +min }) : null,
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        ref: root2,
-        style: wrapperStyle(),
-        className: `${rangeName}`,
-        onClick: (e) => {
-          click(e);
-        },
-        children: [
-          marksList.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "nut-range-mark", children: marksList.map((marks2) => {
-            return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "span",
-              {
-                className: markClassName(marks2),
-                style: marksStyle(marks2),
-                children: [
-                  marks2,
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "nut-range-tick", style: tickStyle(marks2) })
-                ]
-              },
-              marks2
-            );
-          }) }) : null,
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "nut-range-bar", style: barStyle(), children: range3 ? [0, 1].map((item, index) => {
-            return /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                role: "slider",
-                className: `${index === 0 ? "nut-range-button-wrapper-left" : ""}
+  const renderButton = (index) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: button || /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "nut-range-button", children: currentDescription !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "number", children: currentDescription ? currentDescription(curValue(index)) : curValue(index) }) }) });
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: containerClasses, children: [
+    minDescription !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min", children: minDescription || min }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: root2, className: classes, onClick: (e) => click(e), children: [
+      marksList.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "nut-range-mark", children: marksList.map((marks2) => {
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "span",
+          {
+            className: markClassName(marks2),
+            style: marksStyle(marks2),
+            children: [
+              marks2,
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "span",
+                {
+                  className: classNames("nut-range-tick", {
+                    active: tickClass(marks2)
+                  })
+                }
+              )
+            ]
+          },
+          marks2
+        );
+      }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "nut-range-bar", style: barStyle(), children: range3 ? [0, 1].map((item, index) => {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: `${index === 0 ? "nut-range-button-wrapper-left" : ""}
                   ${index === 1 ? "nut-range-button-wrapper-right" : ""}`,
-                tabIndex: disabled ? -1 : 0,
-                "aria-valuemin": +min,
-                "aria-valuenow": curValue(index),
-                "aria-valuemax": +max,
-                "aria-orientation": vertical ? "vertical" : "horizontal",
-                onTouchStart: (e) => {
-                  if (typeof index === "number") {
-                    SetButtonIndex(index);
-                  }
-                  onTouchStart(e);
-                },
-                onTouchMove: (e) => {
-                  onTouchMove(e);
-                },
-                onTouchEnd: (e) => {
-                  onTouchEnd();
-                },
-                onTouchCancel: (e) => {
-                  onTouchEnd();
-                },
-                onClick: (e) => {
-                  e.stopPropagation();
-                },
-                children: button || /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "nut-range-button", style: buttonStyle(), children: !hiddenTag ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "number", children: curValueDesc || curValue(index) }) : null })
-              },
-              index
-            );
-          }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
-            {
-              role: "slider",
-              className: "nut-range-button-wrapper",
-              tabIndex: disabled ? -1 : 0,
-              "aria-valuemin": +min,
-              "aria-valuenow": curValue(),
-              "aria-valuemax": +max,
-              "aria-orientation": vertical ? "vertical" : "horizontal",
-              onTouchStart: (e) => {
-                onTouchStart(e);
-              },
-              onTouchMove: (e) => {
-                onTouchMove(e);
-              },
-              onTouchEnd: (e) => {
-                onTouchEnd();
-              },
-              onTouchCancel: (e) => {
-                onTouchEnd();
-              },
-              onClick: (e) => {
-                e.stopPropagation();
-              },
-              children: button || /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "nut-range-button", style: buttonStyle(), children: !hiddenTag ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "number", children: curValueDesc || curValue() }) : null })
-            }
-          ) })
-        ]
-      }
-    ),
-    !hiddenRange ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max", children: maxDesc || +max }) : null
+            onTouchStart: (e) => {
+              if (typeof index === "number") {
+                setButtonIndex(index);
+              }
+              onTouchStart(e);
+            },
+            onTouchMove: (e) => onTouchMove(e),
+            onTouchEnd: (e) => onTouchEnd(),
+            onTouchCancel: (e) => onTouchEnd(),
+            onClick: (e) => e.stopPropagation(),
+            children: renderButton(index)
+          },
+          index
+        );
+      }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: "nut-range-button-wrapper",
+          onTouchStart: (e) => onTouchStart(e),
+          onTouchMove: (e) => onTouchMove(e),
+          onTouchEnd: (e) => onTouchEnd(),
+          onTouchCancel: (e) => onTouchEnd(),
+          onClick: (e) => e.stopPropagation(),
+          children: renderButton()
+        }
+      ) })
+    ] }),
+    maxDescription !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max", children: maxDescription || max })
   ] });
 };
 Range.defaultProps = defaultProps$M;
@@ -20573,6 +20254,58 @@ const ActionSheet = (props) => {
 };
 ActionSheet.defaultProps = defaultProps$D;
 ActionSheet.displayName = "NutActionSheet";
+const fullClone = {
+  ...ReactDOM
+};
+const { version, render: reactRender, unmountComponentAtNode } = fullClone;
+let createRoot;
+try {
+  const mainVersion = Number((version || "").split(".")[0]);
+  if (mainVersion >= 18 && fullClone.createRoot) {
+    createRoot = fullClone.createRoot;
+  }
+} catch (e) {
+}
+function toggleWarning(skip) {
+  const { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } = fullClone;
+  if (__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED && typeof __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === "object") {
+    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = skip;
+  }
+}
+const MARK = "__nutui_react_root__";
+function legacyRender(node, container) {
+  reactRender(node, container);
+}
+function concurrentRender(node, container) {
+  toggleWarning(true);
+  const root2 = container[MARK] || createRoot(container);
+  toggleWarning(false);
+  root2.render(node);
+  container[MARK] = root2;
+}
+function render(node, container) {
+  if (createRoot) {
+    concurrentRender(node, container);
+    return;
+  }
+  legacyRender(node, container);
+}
+function legacyUnmount(container) {
+  return unmountComponentAtNode(container);
+}
+async function concurrentUnmount(container) {
+  return Promise.resolve().then(() => {
+    var _a2;
+    (_a2 = container[MARK]) == null ? void 0 : _a2.unmount();
+    delete container[MARK];
+  });
+}
+function unmount(container) {
+  if (createRoot) {
+    return concurrentUnmount(container);
+  }
+  return legacyUnmount(container);
+}
 function ConfirmDialog(props) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Dialog, { ...props, children: props.content });
 }
@@ -21619,7 +21352,7 @@ const NoticeBar = (props) => {
 };
 NoticeBar.defaultProps = defaultProps$y;
 NoticeBar.displayName = "NutNoticeBar";
-class Notification extends React.PureComponent {
+let Notification$1 = (_a = class extends React.PureComponent {
   constructor(props) {
     super(props);
     __publicField(this, "closeTimer");
@@ -21710,9 +21443,8 @@ class Notification extends React.PureComponent {
       }
     ) });
   }
-}
-__publicField(Notification, "newInstance");
-Notification.newInstance = (properties, callback) => {
+}, __publicField(_a, "newInstance"), _a);
+Notification$1.newInstance = (properties, callback) => {
   const element = document.createElement("div");
   const id = properties.id ? properties.id : `${(/* @__PURE__ */ new Date()).getTime()}`;
   element.id = id;
@@ -21734,10 +21466,10 @@ Notification.newInstance = (properties, callback) => {
       }
     });
   }
-  render(/* @__PURE__ */ jsxRuntimeExports.jsx(Notification, { ...properties, ref }), element);
+  render(/* @__PURE__ */ jsxRuntimeExports.jsx(Notification$1, { ...properties, ref }), element);
 };
-let messageInstance = null;
-const options = {
+let messageInstance$1 = null;
+const options$1 = {
   msg: "",
   id: "",
   duration: 3e3,
@@ -21751,51 +21483,51 @@ const options = {
   onClick: () => {
   }
 };
-function getInstance(props, callback) {
-  if (messageInstance) {
-    messageInstance.destroy();
-    messageInstance = null;
+function getInstance$1(props, callback) {
+  if (messageInstance$1) {
+    messageInstance$1.destroy();
+    messageInstance$1 = null;
   }
-  Notification.newInstance(props, (notification) => {
+  Notification$1.newInstance(props, (notification) => {
     return callback && callback(notification);
   });
 }
-function notice(opts) {
-  opts = { ...options, ...opts };
-  getInstance(opts, (notification) => {
-    messageInstance = notification;
+function notice$1(opts) {
+  opts = { ...options$1, ...opts };
+  getInstance$1(opts, (notification) => {
+    messageInstance$1 = notification;
   });
 }
-const errorMsg = (msg) => {
+const errorMsg$1 = (msg) => {
   if (!msg) {
     console.warn("[NutUI Notify]: msg不能为空");
   }
 };
 const Notify = {
   text(msg, option = {}) {
-    errorMsg(msg);
-    return notice({ msg, type: "base", ...option });
+    errorMsg$1(msg);
+    return notice$1({ msg, type: "base", ...option });
   },
   success(msg, option = {}) {
-    errorMsg(msg);
-    return notice({ msg, type: "success", ...option });
+    errorMsg$1(msg);
+    return notice$1({ msg, type: "success", ...option });
   },
   primary(msg, option = {}) {
-    errorMsg(msg);
-    return notice({ msg, type: "primary", ...option });
+    errorMsg$1(msg);
+    return notice$1({ msg, type: "primary", ...option });
   },
   danger(msg, option = {}) {
-    errorMsg(msg);
-    return notice({ msg, type: "danger", ...option });
+    errorMsg$1(msg);
+    return notice$1({ msg, type: "danger", ...option });
   },
   warn(msg, option = {}) {
-    errorMsg(msg);
-    return notice({ msg, type: "warning", ...option });
+    errorMsg$1(msg);
+    return notice$1({ msg, type: "warning", ...option });
   },
   hide() {
-    if (messageInstance) {
-      messageInstance.destroy();
-      messageInstance = null;
+    if (messageInstance$1) {
+      messageInstance$1.destroy();
+      messageInstance$1 = null;
     }
   }
 };
@@ -22569,6 +22301,218 @@ const Swipe = forwardRef((props, instanceRef) => {
 });
 Swipe.defaultProps = defaultProps$t;
 Swipe.displayName = "NutSwipe";
+class Notification extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    __publicField(this, "closeTimer");
+    this.close = this.close.bind(this);
+    this.startCloseTimer = this.startCloseTimer.bind(this);
+    this.clearCloseTimer = this.clearCloseTimer.bind(this);
+    this.close = this.close.bind(this);
+    this.clickCover = this.clickCover.bind(this);
+  }
+  close() {
+    this.clearCloseTimer();
+    this.props.onClose();
+  }
+  startCloseTimer() {
+    const { duration } = this.props;
+    if (duration) {
+      this.closeTimer = window.setTimeout(() => {
+        this.close();
+      }, duration * 1e3);
+    }
+  }
+  clearCloseTimer() {
+    if (this.closeTimer) {
+      clearTimeout(this.closeTimer);
+      this.closeTimer = -1;
+    }
+  }
+  clickCover() {
+    const { closeOnClickOverlay } = this.props;
+    if (closeOnClickOverlay) {
+      this.close();
+    }
+  }
+  componentDidMount() {
+    this.startCloseTimer();
+  }
+  componentWillUnmount() {
+    this.clearCloseTimer();
+  }
+  render() {
+    const {
+      id,
+      style,
+      icon,
+      title,
+      msg,
+      bottom,
+      center,
+      bgColor,
+      coverColor,
+      textAlignCenter,
+      size,
+      customClass,
+      cover,
+      type: type4
+    } = this.props;
+    const toastBem = cn("toast");
+    const classes = classNames({
+      "nut-toast-center": center,
+      "nut-toast-has-icon": icon,
+      "nut-toast-cover": cover,
+      "nut-toast-loading": type4 === "loading",
+      [`${customClass}`]: true,
+      [`nut-toast-${size}`]: true
+    });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: `${toastBem()} ${classes}`,
+        id: `toast-${id}`,
+        style: {
+          bottom: center ? "auto" : `${bottom}`,
+          backgroundColor: cover ? coverColor : "",
+          ...style
+        },
+        onClick: () => {
+          this.clickCover();
+        },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: toastBem("inner"),
+            style: {
+              textAlign: textAlignCenter ? "center" : "left",
+              backgroundColor: bgColor
+            },
+            children: [
+              icon ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: toastBem("icon-wrapper"), children: icon }) : null,
+              title ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "nut-toast-title", children: title }) : null,
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: toastBem("text"), children: msg })
+            ]
+          }
+        )
+      }
+    ) });
+  }
+}
+__publicField(Notification, "newInstance");
+Notification.newInstance = (properties, callback) => {
+  const element = document.createElement("div");
+  if (properties.id) {
+    element.setAttribute("id", `${properties.id}`);
+  }
+  document.body.appendChild(element);
+  let called = false;
+  function ref(instance) {
+    if (called) {
+      return;
+    }
+    called = true;
+    callback({
+      component: instance,
+      destroy() {
+        unmount(element);
+        element && element.parentNode && element.parentNode.removeChild(element);
+      }
+    });
+  }
+  render(/* @__PURE__ */ jsxRuntimeExports.jsx(Notification, { ...properties, ref }), element);
+};
+let messageInstance = null;
+const options = {
+  msg: "",
+  id: "",
+  style: {},
+  duration: 1.5,
+  // 时长,duration为0则一直展示
+  center: true,
+  // toast是否居中展示
+  type: "text",
+  title: "",
+  customClass: "",
+  // 自定义样式名
+  bottom: "30px",
+  // center为false时生效，距离底部位置
+  size: "base",
+  // 设置字体大小，默认base,可选large\small\base
+  icon: null,
+  iconSize: "20",
+  textAlignCenter: true,
+  // 文字是否居中显示,true为居中，false为left
+  loadingRotate: true,
+  // 未实现
+  bgColor: "rgba(0, 0, 0, .8)",
+  onClose: () => {
+  },
+  cover: false,
+  // 是否展示透明遮罩层
+  coverColor: "rgba(0, 0, 0, 0)",
+  // 遮罩颜色设定
+  closeOnClickOverlay: false
+  // 是否点击遮罩可关闭
+};
+function getInstance(props, callback) {
+  if (messageInstance) {
+    messageInstance.destroy();
+    messageInstance = null;
+  }
+  Notification.newInstance(props, (notification) => {
+    return callback && callback(notification);
+  });
+}
+function notice(opts) {
+  function close() {
+    if (messageInstance) {
+      messageInstance.destroy();
+      messageInstance = null;
+    }
+  }
+  const opts2 = { ...options, ...opts, onClose: close };
+  getInstance(opts2, (notification) => {
+    messageInstance = notification;
+  });
+}
+const errorMsg = (msg) => {
+  if (!msg) {
+    console.warn("[NutUI Toast]: msg cannot be null");
+  }
+};
+const Toast = {
+  text(msg, option = {}) {
+    errorMsg(msg);
+    return notice({ msg, type: "text", ...option });
+  },
+  success(msg, option = {}) {
+    errorMsg(msg);
+    return notice({ msg, icon: "success", type: "success", ...option });
+  },
+  fail(msg, option = {}) {
+    errorMsg(msg);
+    return notice({ msg, icon: "failure", type: "fail", ...option });
+  },
+  loading(msg, option = {}) {
+    errorMsg(msg);
+    return notice({ msg, icon: /* @__PURE__ */ jsxRuntimeExports.jsx(k$3, {}), type: "loading", ...option });
+  },
+  warn(msg, option = {}) {
+    errorMsg(msg);
+    return notice({ msg, icon: "tips", type: "warn", ...option });
+  },
+  customIcon(msg, option = {}) {
+    errorMsg(msg);
+    return notice({ msg, ...option });
+  },
+  hide() {
+    if (messageInstance) {
+      messageInstance.destroy();
+      messageInstance = null;
+    }
+  }
+};
 const defaultProps$s = {
   ...ComponentDefaults,
   type: "shake",
@@ -22845,9 +22789,11 @@ const Audio = (props) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${classPrefix2}__progress-bar-wrapper`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Range,
           {
-            modelValue: percent,
-            hiddenTag: true,
-            hiddenRange: true,
+            value: percent,
+            onChange: (val) => setPercent(val),
+            currentDescription: null,
+            maxDescription: null,
+            minDescription: null,
             "inactive-color": "#cccccc",
             "active-color": "#fa2c19"
           }