@itcase/ui 1.0.1

package/dist/components/RangeSlider.js

@@ -0,0 +1,2086 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var fill = require('../constants/componentProps/fill.js');
+var shape = require('../constants/componentProps/shape.js');
+var width = require('../constants/componentProps/width.js');
+var useStyles = require('../useStyles-77c3b520.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var objectWithoutProperties = require('../objectWithoutProperties-ea190611.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var classnames = {exports: {}};
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+(function (module) {
+	/* global define */
+
+	(function () {
+
+		var hasOwn = {}.hasOwnProperty;
+
+		function classNames() {
+			var classes = [];
+
+			for (var i = 0; i < arguments.length; i++) {
+				var arg = arguments[i];
+				if (!arg) continue;
+
+				var argType = typeof arg;
+
+				if (argType === 'string' || argType === 'number') {
+					classes.push(arg);
+				} else if (Array.isArray(arg)) {
+					if (arg.length) {
+						var inner = classNames.apply(null, arg);
+						if (inner) {
+							classes.push(inner);
+						}
+					}
+				} else if (argType === 'object') {
+					if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+						classes.push(arg.toString());
+						continue;
+					}
+
+					for (var key in arg) {
+						if (hasOwn.call(arg, key) && arg[key]) {
+							classes.push(key);
+						}
+					}
+				}
+			}
+
+			return classes.join(' ');
+		}
+
+		if (module.exports) {
+			classNames.default = classNames;
+			module.exports = classNames;
+		} else {
+			window.classNames = classNames;
+		}
+	}()); 
+} (classnames));
+
+var classnamesExports = classnames.exports;
+var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
+
+/* eslint-disable no-console */
+var warned = {};
+var preWarningFns = [];
+
+/**
+ * Pre warning enable you to parse content before console.error.
+ * Modify to null will prevent warning.
+ */
+var preMessage = function preMessage(fn) {
+  preWarningFns.push(fn);
+};
+function warning(valid, message) {
+  // Support uglify
+  if (process.env.NODE_ENV !== 'production' && !valid && console !== undefined) {
+    var finalMessage = preWarningFns.reduce(function (msg, preMessageFn) {
+      return preMessageFn(msg !== null && msg !== void 0 ? msg : '', 'warning');
+    }, message);
+    if (finalMessage) {
+      console.error("Warning: ".concat(finalMessage));
+    }
+  }
+}
+function note(valid, message) {
+  // Support uglify
+  if (process.env.NODE_ENV !== 'production' && !valid && console !== undefined) {
+    var finalMessage = preWarningFns.reduce(function (msg, preMessageFn) {
+      return preMessageFn(msg !== null && msg !== void 0 ? msg : '', 'note');
+    }, message);
+    if (finalMessage) {
+      console.warn("Note: ".concat(finalMessage));
+    }
+  }
+}
+function resetWarned() {
+  warned = {};
+}
+function call(method, valid, message) {
+  if (!valid && !warned[message]) {
+    method(false, message);
+    warned[message] = true;
+  }
+}
+function warningOnce(valid, message) {
+  call(warning, valid, message);
+}
+function noteOnce(valid, message) {
+  call(note, valid, message);
+}
+warningOnce.preMessage = preMessage;
+warningOnce.resetWarned = resetWarned;
+warningOnce.noteOnce = noteOnce;
+/* eslint-enable */
+
+/**
+ * Deeply compares two object literals.
+ * @param obj1 object 1
+ * @param obj2 object 2
+ * @param shallow shallow compare
+ * @returns
+ */
+function isEqual(obj1, obj2) {
+  var shallow = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  // https://github.com/mapbox/mapbox-gl-js/pull/5979/files#diff-fde7145050c47cc3a306856efd5f9c3016e86e859de9afbd02c879be5067e58f
+  var refSet = new Set();
+  function deepEqual(a, b) {
+    var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+    var circular = refSet.has(a);
+    warningOnce(!circular, 'Warning: There may be circular references');
+    if (circular) {
+      return false;
+    }
+    if (a === b) {
+      return true;
+    }
+    if (shallow && level > 1) {
+      return false;
+    }
+    refSet.add(a);
+    var newLevel = level + 1;
+    if (Array.isArray(a)) {
+      if (!Array.isArray(b) || a.length !== b.length) {
+        return false;
+      }
+      for (var i = 0; i < a.length; i++) {
+        if (!deepEqual(a[i], b[i], newLevel)) {
+          return false;
+        }
+      }
+      return true;
+    }
+    if (a && b && objectWithoutProperties._typeof(a) === 'object' && objectWithoutProperties._typeof(b) === 'object') {
+      var keys = Object.keys(a);
+      if (keys.length !== Object.keys(b).length) {
+        return false;
+      }
+      return keys.every(function (key) {
+        return deepEqual(a[key], b[key], newLevel);
+      });
+    }
+    // other
+    return false;
+  }
+  return deepEqual(obj1, obj2);
+}
+
+function useEvent(callback) {
+  var fnRef = React__namespace.useRef();
+  fnRef.current = callback;
+  var memoFn = React__namespace.useCallback(function () {
+    var _fnRef$current;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return (_fnRef$current = fnRef.current) === null || _fnRef$current === void 0 ? void 0 : _fnRef$current.call.apply(_fnRef$current, [fnRef].concat(args));
+  }, []);
+  return memoFn;
+}
+
+function canUseDom() {
+  return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+}
+
+/**
+ * Wrap `React.useLayoutEffect` which will not throw warning message in test env
+ */
+var useLayoutEffect = process.env.NODE_ENV !== 'test' && canUseDom() ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+var useLayoutUpdateEffect = function useLayoutUpdateEffect(callback, deps) {
+  var firstMountRef = React__namespace.useRef(true);
+  useLayoutEffect(function () {
+    if (!firstMountRef.current) {
+      return callback();
+    }
+  }, deps);
+
+  // We tell react that first mount has passed
+  useLayoutEffect(function () {
+    firstMountRef.current = false;
+    return function () {
+      firstMountRef.current = true;
+    };
+  }, []);
+};
+
+/**
+ * Same as React.useState but `setState` accept `ignoreDestroy` param to not to setState after destroyed.
+ * We do not make this auto is to avoid real memory leak.
+ * Developer should confirm it's safe to ignore themselves.
+ */
+function useSafeState(defaultValue) {
+  var destroyRef = React__namespace.useRef(false);
+  var _React$useState = React__namespace.useState(defaultValue),
+    _React$useState2 = objectWithoutProperties._slicedToArray(_React$useState, 2),
+    value = _React$useState2[0],
+    setValue = _React$useState2[1];
+  React__namespace.useEffect(function () {
+    destroyRef.current = false;
+    return function () {
+      destroyRef.current = true;
+    };
+  }, []);
+  function safeSetState(updater, ignoreDestroy) {
+    if (ignoreDestroy && destroyRef.current) {
+      return;
+    }
+    setValue(updater);
+  }
+  return [value, safeSetState];
+}
+
+/** We only think `undefined` is empty */
+function hasValue(value) {
+  return value !== undefined;
+}
+
+/**
+ * Similar to `useState` but will use props value if provided.
+ * Note that internal use rc-util `useState` hook.
+ */
+function useMergedState(defaultStateValue, option) {
+  var _ref = option || {},
+    defaultValue = _ref.defaultValue,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    postState = _ref.postState;
+
+  // ======================= Init =======================
+  var _useState = useSafeState(function () {
+      if (hasValue(value)) {
+        return value;
+      } else if (hasValue(defaultValue)) {
+        return typeof defaultValue === 'function' ? defaultValue() : defaultValue;
+      } else {
+        return typeof defaultStateValue === 'function' ? defaultStateValue() : defaultStateValue;
+      }
+    }),
+    _useState2 = objectWithoutProperties._slicedToArray(_useState, 2),
+    innerValue = _useState2[0],
+    setInnerValue = _useState2[1];
+  var mergedValue = value !== undefined ? value : innerValue;
+  var postMergedValue = postState ? postState(mergedValue) : mergedValue;
+
+  // ====================== Change ======================
+  var onChangeFn = useEvent(onChange);
+  var _useState3 = useSafeState([mergedValue]),
+    _useState4 = objectWithoutProperties._slicedToArray(_useState3, 2),
+    prevValue = _useState4[0],
+    setPrevValue = _useState4[1];
+  useLayoutUpdateEffect(function () {
+    var prev = prevValue[0];
+    if (innerValue !== prev) {
+      onChangeFn(innerValue, prev);
+    }
+  }, [prevValue]);
+
+  // Sync value back to `undefined` when it from control to un-control
+  useLayoutUpdateEffect(function () {
+    if (!hasValue(value)) {
+      setInnerValue(value);
+    }
+  }, [value]);
+
+  // ====================== Update ======================
+  var triggerChange = useEvent(function (updater, ignoreDestroy) {
+    setInnerValue(updater, ignoreDestroy);
+    setPrevValue([mergedValue], ignoreDestroy);
+  });
+  return [postMergedValue, triggerChange];
+}
+
+/**
+ * @ignore
+ * some key-codes definition and utils from closure-library
+ * @author yiminghe@gmail.com
+ */
+
+var KeyCode = {
+  /**
+   * MAC_ENTER
+   */
+  MAC_ENTER: 3,
+  /**
+   * BACKSPACE
+   */
+  BACKSPACE: 8,
+  /**
+   * TAB
+   */
+  TAB: 9,
+  /**
+   * NUMLOCK on FF/Safari Mac
+   */
+  NUM_CENTER: 12,
+  // NUMLOCK on FF/Safari Mac
+  /**
+   * ENTER
+   */
+  ENTER: 13,
+  /**
+   * SHIFT
+   */
+  SHIFT: 16,
+  /**
+   * CTRL
+   */
+  CTRL: 17,
+  /**
+   * ALT
+   */
+  ALT: 18,
+  /**
+   * PAUSE
+   */
+  PAUSE: 19,
+  /**
+   * CAPS_LOCK
+   */
+  CAPS_LOCK: 20,
+  /**
+   * ESC
+   */
+  ESC: 27,
+  /**
+   * SPACE
+   */
+  SPACE: 32,
+  /**
+   * PAGE_UP
+   */
+  PAGE_UP: 33,
+  // also NUM_NORTH_EAST
+  /**
+   * PAGE_DOWN
+   */
+  PAGE_DOWN: 34,
+  // also NUM_SOUTH_EAST
+  /**
+   * END
+   */
+  END: 35,
+  // also NUM_SOUTH_WEST
+  /**
+   * HOME
+   */
+  HOME: 36,
+  // also NUM_NORTH_WEST
+  /**
+   * LEFT
+   */
+  LEFT: 37,
+  // also NUM_WEST
+  /**
+   * UP
+   */
+  UP: 38,
+  // also NUM_NORTH
+  /**
+   * RIGHT
+   */
+  RIGHT: 39,
+  // also NUM_EAST
+  /**
+   * DOWN
+   */
+  DOWN: 40,
+  // also NUM_SOUTH
+  /**
+   * PRINT_SCREEN
+   */
+  PRINT_SCREEN: 44,
+  /**
+   * INSERT
+   */
+  INSERT: 45,
+  // also NUM_INSERT
+  /**
+   * DELETE
+   */
+  DELETE: 46,
+  // also NUM_DELETE
+  /**
+   * ZERO
+   */
+  ZERO: 48,
+  /**
+   * ONE
+   */
+  ONE: 49,
+  /**
+   * TWO
+   */
+  TWO: 50,
+  /**
+   * THREE
+   */
+  THREE: 51,
+  /**
+   * FOUR
+   */
+  FOUR: 52,
+  /**
+   * FIVE
+   */
+  FIVE: 53,
+  /**
+   * SIX
+   */
+  SIX: 54,
+  /**
+   * SEVEN
+   */
+  SEVEN: 55,
+  /**
+   * EIGHT
+   */
+  EIGHT: 56,
+  /**
+   * NINE
+   */
+  NINE: 57,
+  /**
+   * QUESTION_MARK
+   */
+  QUESTION_MARK: 63,
+  // needs localization
+  /**
+   * A
+   */
+  A: 65,
+  /**
+   * B
+   */
+  B: 66,
+  /**
+   * C
+   */
+  C: 67,
+  /**
+   * D
+   */
+  D: 68,
+  /**
+   * E
+   */
+  E: 69,
+  /**
+   * F
+   */
+  F: 70,
+  /**
+   * G
+   */
+  G: 71,
+  /**
+   * H
+   */
+  H: 72,
+  /**
+   * I
+   */
+  I: 73,
+  /**
+   * J
+   */
+  J: 74,
+  /**
+   * K
+   */
+  K: 75,
+  /**
+   * L
+   */
+  L: 76,
+  /**
+   * M
+   */
+  M: 77,
+  /**
+   * N
+   */
+  N: 78,
+  /**
+   * O
+   */
+  O: 79,
+  /**
+   * P
+   */
+  P: 80,
+  /**
+   * Q
+   */
+  Q: 81,
+  /**
+   * R
+   */
+  R: 82,
+  /**
+   * S
+   */
+  S: 83,
+  /**
+   * T
+   */
+  T: 84,
+  /**
+   * U
+   */
+  U: 85,
+  /**
+   * V
+   */
+  V: 86,
+  /**
+   * W
+   */
+  W: 87,
+  /**
+   * X
+   */
+  X: 88,
+  /**
+   * Y
+   */
+  Y: 89,
+  /**
+   * Z
+   */
+  Z: 90,
+  /**
+   * META
+   */
+  META: 91,
+  // WIN_KEY_LEFT
+  /**
+   * WIN_KEY_RIGHT
+   */
+  WIN_KEY_RIGHT: 92,
+  /**
+   * CONTEXT_MENU
+   */
+  CONTEXT_MENU: 93,
+  /**
+   * NUM_ZERO
+   */
+  NUM_ZERO: 96,
+  /**
+   * NUM_ONE
+   */
+  NUM_ONE: 97,
+  /**
+   * NUM_TWO
+   */
+  NUM_TWO: 98,
+  /**
+   * NUM_THREE
+   */
+  NUM_THREE: 99,
+  /**
+   * NUM_FOUR
+   */
+  NUM_FOUR: 100,
+  /**
+   * NUM_FIVE
+   */
+  NUM_FIVE: 101,
+  /**
+   * NUM_SIX
+   */
+  NUM_SIX: 102,
+  /**
+   * NUM_SEVEN
+   */
+  NUM_SEVEN: 103,
+  /**
+   * NUM_EIGHT
+   */
+  NUM_EIGHT: 104,
+  /**
+   * NUM_NINE
+   */
+  NUM_NINE: 105,
+  /**
+   * NUM_MULTIPLY
+   */
+  NUM_MULTIPLY: 106,
+  /**
+   * NUM_PLUS
+   */
+  NUM_PLUS: 107,
+  /**
+   * NUM_MINUS
+   */
+  NUM_MINUS: 109,
+  /**
+   * NUM_PERIOD
+   */
+  NUM_PERIOD: 110,
+  /**
+   * NUM_DIVISION
+   */
+  NUM_DIVISION: 111,
+  /**
+   * F1
+   */
+  F1: 112,
+  /**
+   * F2
+   */
+  F2: 113,
+  /**
+   * F3
+   */
+  F3: 114,
+  /**
+   * F4
+   */
+  F4: 115,
+  /**
+   * F5
+   */
+  F5: 116,
+  /**
+   * F6
+   */
+  F6: 117,
+  /**
+   * F7
+   */
+  F7: 118,
+  /**
+   * F8
+   */
+  F8: 119,
+  /**
+   * F9
+   */
+  F9: 120,
+  /**
+   * F10
+   */
+  F10: 121,
+  /**
+   * F11
+   */
+  F11: 122,
+  /**
+   * F12
+   */
+  F12: 123,
+  /**
+   * NUMLOCK
+   */
+  NUMLOCK: 144,
+  /**
+   * SEMICOLON
+   */
+  SEMICOLON: 186,
+  // needs localization
+  /**
+   * DASH
+   */
+  DASH: 189,
+  // needs localization
+  /**
+   * EQUALS
+   */
+  EQUALS: 187,
+  // needs localization
+  /**
+   * COMMA
+   */
+  COMMA: 188,
+  // needs localization
+  /**
+   * PERIOD
+   */
+  PERIOD: 190,
+  // needs localization
+  /**
+   * SLASH
+   */
+  SLASH: 191,
+  // needs localization
+  /**
+   * APOSTROPHE
+   */
+  APOSTROPHE: 192,
+  // needs localization
+  /**
+   * SINGLE_QUOTE
+   */
+  SINGLE_QUOTE: 222,
+  // needs localization
+  /**
+   * OPEN_SQUARE_BRACKET
+   */
+  OPEN_SQUARE_BRACKET: 219,
+  // needs localization
+  /**
+   * BACKSLASH
+   */
+  BACKSLASH: 220,
+  // needs localization
+  /**
+   * CLOSE_SQUARE_BRACKET
+   */
+  CLOSE_SQUARE_BRACKET: 221,
+  // needs localization
+  /**
+   * WIN_KEY
+   */
+  WIN_KEY: 224,
+  /**
+   * MAC_FF_META
+   */
+  MAC_FF_META: 224,
+  // Firefox (Gecko) fires this for the meta key instead of 91
+  /**
+   * WIN_IME
+   */
+  WIN_IME: 229,
+  // ======================== Function ========================
+  /**
+   * whether text and modified key is entered at the same time.
+   */
+  isTextModifyingKeyEvent: function isTextModifyingKeyEvent(e) {
+    var keyCode = e.keyCode;
+    if (e.altKey && !e.ctrlKey || e.metaKey ||
+    // Function keys don't generate text
+    keyCode >= KeyCode.F1 && keyCode <= KeyCode.F12) {
+      return false;
+    }
+
+    // The following keys are quite harmless, even in combination with
+    // CTRL, ALT or SHIFT.
+    switch (keyCode) {
+      case KeyCode.ALT:
+      case KeyCode.CAPS_LOCK:
+      case KeyCode.CONTEXT_MENU:
+      case KeyCode.CTRL:
+      case KeyCode.DOWN:
+      case KeyCode.END:
+      case KeyCode.ESC:
+      case KeyCode.HOME:
+      case KeyCode.INSERT:
+      case KeyCode.LEFT:
+      case KeyCode.MAC_FF_META:
+      case KeyCode.META:
+      case KeyCode.NUMLOCK:
+      case KeyCode.NUM_CENTER:
+      case KeyCode.PAGE_DOWN:
+      case KeyCode.PAGE_UP:
+      case KeyCode.PAUSE:
+      case KeyCode.PRINT_SCREEN:
+      case KeyCode.RIGHT:
+      case KeyCode.SHIFT:
+      case KeyCode.UP:
+      case KeyCode.WIN_KEY:
+      case KeyCode.WIN_KEY_RIGHT:
+        return false;
+      default:
+        return true;
+    }
+  },
+  /**
+   * whether character is entered.
+   */
+  isCharacterKey: function isCharacterKey(keyCode) {
+    if (keyCode >= KeyCode.ZERO && keyCode <= KeyCode.NINE) {
+      return true;
+    }
+    if (keyCode >= KeyCode.NUM_ZERO && keyCode <= KeyCode.NUM_MULTIPLY) {
+      return true;
+    }
+    if (keyCode >= KeyCode.A && keyCode <= KeyCode.Z) {
+      return true;
+    }
+
+    // Safari sends zero key code for non-latin characters.
+    if (window.navigator.userAgent.indexOf('WebKit') !== -1 && keyCode === 0) {
+      return true;
+    }
+    switch (keyCode) {
+      case KeyCode.SPACE:
+      case KeyCode.QUESTION_MARK:
+      case KeyCode.NUM_PLUS:
+      case KeyCode.NUM_MINUS:
+      case KeyCode.NUM_PERIOD:
+      case KeyCode.NUM_DIVISION:
+      case KeyCode.SEMICOLON:
+      case KeyCode.DASH:
+      case KeyCode.EQUALS:
+      case KeyCode.COMMA:
+      case KeyCode.PERIOD:
+      case KeyCode.SLASH:
+      case KeyCode.APOSTROPHE:
+      case KeyCode.SINGLE_QUOTE:
+      case KeyCode.OPEN_SQUARE_BRACKET:
+      case KeyCode.BACKSLASH:
+      case KeyCode.CLOSE_SQUARE_BRACKET:
+        return true;
+      default:
+        return false;
+    }
+  }
+};
+
+var SliderContext = /*#__PURE__*/React__namespace.createContext({
+  min: 0,
+  max: 0,
+  direction: 'ltr',
+  step: 1,
+  includedStart: 0,
+  includedEnd: 0,
+  tabIndex: 0,
+  keyboard: true
+});
+
+function getOffset(value, min, max) {
+  return (value - min) / (max - min);
+}
+function getDirectionStyle(direction, value, min, max) {
+  var offset = getOffset(value, min, max);
+  var positionStyle = {};
+  switch (direction) {
+    case 'rtl':
+      positionStyle.right = "".concat(offset * 100, "%");
+      positionStyle.transform = 'translateX(50%)';
+      break;
+    case 'btt':
+      positionStyle.bottom = "".concat(offset * 100, "%");
+      positionStyle.transform = 'translateY(50%)';
+      break;
+    case 'ttb':
+      positionStyle.top = "".concat(offset * 100, "%");
+      positionStyle.transform = 'translateY(-50%)';
+      break;
+    default:
+      positionStyle.left = "".concat(offset * 100, "%");
+      positionStyle.transform = 'translateX(-50%)';
+      break;
+  }
+  return positionStyle;
+}
+/** Return index value if is list or return value directly */
+function getIndex(value, index) {
+  return Array.isArray(value) ? value[index] : value;
+}
+
+var _excluded$1 = ["prefixCls", "value", "valueIndex", "onStartMove", "style", "render", "dragging", "onOffsetChange"];
+var Handle = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
+  var _classNames, _getIndex;
+  var prefixCls = props.prefixCls,
+    value = props.value,
+    valueIndex = props.valueIndex,
+    onStartMove = props.onStartMove,
+    style = props.style,
+    render = props.render,
+    dragging = props.dragging,
+    onOffsetChange = props.onOffsetChange,
+    restProps = objectWithoutProperties._objectWithoutProperties(props, _excluded$1);
+  var _React$useContext = React__namespace.useContext(SliderContext),
+    min = _React$useContext.min,
+    max = _React$useContext.max,
+    direction = _React$useContext.direction,
+    disabled = _React$useContext.disabled,
+    keyboard = _React$useContext.keyboard,
+    range = _React$useContext.range,
+    tabIndex = _React$useContext.tabIndex,
+    ariaLabelForHandle = _React$useContext.ariaLabelForHandle,
+    ariaLabelledByForHandle = _React$useContext.ariaLabelledByForHandle,
+    ariaValueTextFormatterForHandle = _React$useContext.ariaValueTextFormatterForHandle;
+  var handlePrefixCls = "".concat(prefixCls, "-handle");
+  // ============================ Events ============================
+  var onInternalStartMove = function onInternalStartMove(e) {
+    if (!disabled) {
+      onStartMove(e, valueIndex);
+    }
+  };
+  // =========================== Keyboard ===========================
+  var onKeyDown = function onKeyDown(e) {
+    if (!disabled && keyboard) {
+      var offset = null;
+      // Change the value
+      switch (e.which || e.keyCode) {
+        case KeyCode.LEFT:
+          offset = direction === 'ltr' || direction === 'btt' ? -1 : 1;
+          break;
+        case KeyCode.RIGHT:
+          offset = direction === 'ltr' || direction === 'btt' ? 1 : -1;
+          break;
+        // Up is plus
+        case KeyCode.UP:
+          offset = direction !== 'ttb' ? 1 : -1;
+          break;
+        // Down is minus
+        case KeyCode.DOWN:
+          offset = direction !== 'ttb' ? -1 : 1;
+          break;
+        case KeyCode.HOME:
+          offset = 'min';
+          break;
+        case KeyCode.END:
+          offset = 'max';
+          break;
+        case KeyCode.PAGE_UP:
+          offset = 2;
+          break;
+        case KeyCode.PAGE_DOWN:
+          offset = -2;
+          break;
+      }
+      if (offset !== null) {
+        e.preventDefault();
+        onOffsetChange(offset, valueIndex);
+      }
+    }
+  };
+  // ============================ Offset ============================
+  var positionStyle = getDirectionStyle(direction, value, min, max);
+  // ============================ Render ============================
+  var handleNode = /*#__PURE__*/React__namespace.createElement("div", objectWithoutProperties._extends({
+    ref: ref,
+    className: classNames(handlePrefixCls, (_classNames = {}, objectWithoutProperties._defineProperty(_classNames, "".concat(handlePrefixCls, "-").concat(valueIndex + 1), range), objectWithoutProperties._defineProperty(_classNames, "".concat(handlePrefixCls, "-dragging"), dragging), _classNames)),
+    style: objectWithoutProperties._objectSpread2(objectWithoutProperties._objectSpread2({}, positionStyle), style),
+    onMouseDown: onInternalStartMove,
+    onTouchStart: onInternalStartMove,
+    onKeyDown: onKeyDown,
+    tabIndex: disabled ? null : getIndex(tabIndex, valueIndex),
+    role: "slider",
+    "aria-valuemin": min,
+    "aria-valuemax": max,
+    "aria-valuenow": value,
+    "aria-disabled": disabled,
+    "aria-label": getIndex(ariaLabelForHandle, valueIndex),
+    "aria-labelledby": getIndex(ariaLabelledByForHandle, valueIndex),
+    "aria-valuetext": (_getIndex = getIndex(ariaValueTextFormatterForHandle, valueIndex)) === null || _getIndex === void 0 ? void 0 : _getIndex(value)
+  }, restProps));
+  // Customize
+  if (render) {
+    handleNode = render(handleNode, {
+      index: valueIndex,
+      prefixCls: prefixCls,
+      value: value,
+      dragging: dragging
+    });
+  }
+  return handleNode;
+});
+if (process.env.NODE_ENV !== 'production') {
+  Handle.displayName = 'Handle';
+}
+
+var _excluded = ["prefixCls", "style", "onStartMove", "onOffsetChange", "values", "handleRender", "draggingIndex"];
+var Handles = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
+  var prefixCls = props.prefixCls,
+    style = props.style,
+    onStartMove = props.onStartMove,
+    onOffsetChange = props.onOffsetChange,
+    values = props.values,
+    handleRender = props.handleRender,
+    draggingIndex = props.draggingIndex,
+    restProps = objectWithoutProperties._objectWithoutProperties(props, _excluded);
+  var handlesRef = React__namespace.useRef({});
+  React__namespace.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus(index) {
+        var _handlesRef$current$i;
+        (_handlesRef$current$i = handlesRef.current[index]) === null || _handlesRef$current$i === void 0 ? void 0 : _handlesRef$current$i.focus();
+      }
+    };
+  });
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, values.map(function (value, index) {
+    return /*#__PURE__*/React__namespace.createElement(Handle, objectWithoutProperties._extends({
+      ref: function ref(node) {
+        if (!node) {
+          delete handlesRef.current[index];
+        } else {
+          handlesRef.current[index] = node;
+        }
+      },
+      dragging: draggingIndex === index,
+      prefixCls: prefixCls,
+      style: getIndex(style, index),
+      key: index,
+      value: value,
+      valueIndex: index,
+      onStartMove: onStartMove,
+      onOffsetChange: onOffsetChange,
+      render: handleRender
+    }, restProps));
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  Handles.displayName = 'Handles';
+}
+
+function getPosition(e) {
+  var obj = 'touches' in e ? e.touches[0] : e;
+  return {
+    pageX: obj.pageX,
+    pageY: obj.pageY
+  };
+}
+function useDrag(containerRef, direction, rawValues, min, max, formatValue, triggerChange, finishChange, offsetValues) {
+  var _React$useState = React__namespace.useState(null),
+    _React$useState2 = objectWithoutProperties._slicedToArray(_React$useState, 2),
+    draggingValue = _React$useState2[0],
+    setDraggingValue = _React$useState2[1];
+  var _React$useState3 = React__namespace.useState(-1),
+    _React$useState4 = objectWithoutProperties._slicedToArray(_React$useState3, 2),
+    draggingIndex = _React$useState4[0],
+    setDraggingIndex = _React$useState4[1];
+  var _React$useState5 = React__namespace.useState(rawValues),
+    _React$useState6 = objectWithoutProperties._slicedToArray(_React$useState5, 2),
+    cacheValues = _React$useState6[0],
+    setCacheValues = _React$useState6[1];
+  var _React$useState7 = React__namespace.useState(rawValues),
+    _React$useState8 = objectWithoutProperties._slicedToArray(_React$useState7, 2),
+    originValues = _React$useState8[0],
+    setOriginValues = _React$useState8[1];
+  var mouseMoveEventRef = React__namespace.useRef(null);
+  var mouseUpEventRef = React__namespace.useRef(null);
+  React__namespace.useEffect(function () {
+    if (draggingIndex === -1) {
+      setCacheValues(rawValues);
+    }
+  }, [rawValues, draggingIndex]);
+  // Clean up event
+  React__namespace.useEffect(function () {
+    return function () {
+      document.removeEventListener('mousemove', mouseMoveEventRef.current);
+      document.removeEventListener('mouseup', mouseUpEventRef.current);
+      document.removeEventListener('touchmove', mouseMoveEventRef.current);
+      document.removeEventListener('touchend', mouseUpEventRef.current);
+    };
+  }, []);
+  var flushValues = function flushValues(nextValues, nextValue) {
+    // Perf: Only update state when value changed
+    if (cacheValues.some(function (val, i) {
+      return val !== nextValues[i];
+    })) {
+      if (nextValue !== undefined) {
+        setDraggingValue(nextValue);
+      }
+      setCacheValues(nextValues);
+      triggerChange(nextValues);
+    }
+  };
+  var updateCacheValue = function updateCacheValue(valueIndex, offsetPercent) {
+    // Basic point offset
+    if (valueIndex === -1) {
+      // >>>> Dragging on the track
+      var startValue = originValues[0];
+      var endValue = originValues[originValues.length - 1];
+      var maxStartOffset = min - startValue;
+      var maxEndOffset = max - endValue;
+      // Get valid offset
+      var offset = offsetPercent * (max - min);
+      offset = Math.max(offset, maxStartOffset);
+      offset = Math.min(offset, maxEndOffset);
+      // Use first value to revert back of valid offset (like steps marks)
+      var formatStartValue = formatValue(startValue + offset);
+      offset = formatStartValue - startValue;
+      var cloneCacheValues = originValues.map(function (val) {
+        return val + offset;
+      });
+      flushValues(cloneCacheValues);
+    } else {
+      // >>>> Dragging on the handle
+      var offsetDist = (max - min) * offsetPercent;
+      // Always start with the valueIndex origin value
+      var cloneValues = objectWithoutProperties._toConsumableArray(cacheValues);
+      cloneValues[valueIndex] = originValues[valueIndex];
+      var next = offsetValues(cloneValues, offsetDist, valueIndex, 'dist');
+      flushValues(next.values, next.value);
+    }
+  };
+  // Resolve closure
+  var updateCacheValueRef = React__namespace.useRef(updateCacheValue);
+  updateCacheValueRef.current = updateCacheValue;
+  var onStartMove = function onStartMove(e, valueIndex) {
+    e.stopPropagation();
+    var originValue = rawValues[valueIndex];
+    setDraggingIndex(valueIndex);
+    setDraggingValue(originValue);
+    setOriginValues(rawValues);
+    var _getPosition = getPosition(e),
+      startX = _getPosition.pageX,
+      startY = _getPosition.pageY;
+    // Moving
+    var onMouseMove = function onMouseMove(event) {
+      event.preventDefault();
+      var _getPosition2 = getPosition(event),
+        moveX = _getPosition2.pageX,
+        moveY = _getPosition2.pageY;
+      var offsetX = moveX - startX;
+      var offsetY = moveY - startY;
+      var _containerRef$current = containerRef.current.getBoundingClientRect(),
+        width = _containerRef$current.width,
+        height = _containerRef$current.height;
+      var offSetPercent;
+      switch (direction) {
+        case 'btt':
+          offSetPercent = -offsetY / height;
+          break;
+        case 'ttb':
+          offSetPercent = offsetY / height;
+          break;
+        case 'rtl':
+          offSetPercent = -offsetX / width;
+          break;
+        default:
+          offSetPercent = offsetX / width;
+      }
+      updateCacheValueRef.current(valueIndex, offSetPercent);
+    };
+    // End
+    var onMouseUp = function onMouseUp(event) {
+      event.preventDefault();
+      document.removeEventListener('mouseup', onMouseUp);
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('touchend', onMouseUp);
+      document.removeEventListener('touchmove', onMouseMove);
+      mouseMoveEventRef.current = null;
+      mouseUpEventRef.current = null;
+      setDraggingIndex(-1);
+      finishChange();
+    };
+    document.addEventListener('mouseup', onMouseUp);
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('touchend', onMouseUp);
+    document.addEventListener('touchmove', onMouseMove);
+    mouseMoveEventRef.current = onMouseMove;
+    mouseUpEventRef.current = onMouseUp;
+  };
+  // Only return cache value when it mapping with rawValues
+  var returnValues = React__namespace.useMemo(function () {
+    var sourceValues = objectWithoutProperties._toConsumableArray(rawValues).sort(function (a, b) {
+      return a - b;
+    });
+    var targetValues = objectWithoutProperties._toConsumableArray(cacheValues).sort(function (a, b) {
+      return a - b;
+    });
+    return sourceValues.every(function (val, index) {
+      return val === targetValues[index];
+    }) ? cacheValues : rawValues;
+  }, [rawValues, cacheValues]);
+  return [draggingIndex, draggingValue, returnValues, onStartMove];
+}
+
+function Track(props) {
+  var prefixCls = props.prefixCls,
+    style = props.style,
+    start = props.start,
+    end = props.end,
+    index = props.index,
+    onStartMove = props.onStartMove;
+  var _React$useContext = React__namespace.useContext(SliderContext),
+    direction = _React$useContext.direction,
+    min = _React$useContext.min,
+    max = _React$useContext.max,
+    disabled = _React$useContext.disabled,
+    range = _React$useContext.range;
+  var trackPrefixCls = "".concat(prefixCls, "-track");
+  var offsetStart = getOffset(start, min, max);
+  var offsetEnd = getOffset(end, min, max);
+  // ============================ Events ============================
+  var onInternalStartMove = function onInternalStartMove(e) {
+    if (!disabled && onStartMove) {
+      onStartMove(e, -1);
+    }
+  };
+  // ============================ Render ============================
+  var positionStyle = {};
+  switch (direction) {
+    case 'rtl':
+      positionStyle.right = "".concat(offsetStart * 100, "%");
+      positionStyle.width = "".concat(offsetEnd * 100 - offsetStart * 100, "%");
+      break;
+    case 'btt':
+      positionStyle.bottom = "".concat(offsetStart * 100, "%");
+      positionStyle.height = "".concat(offsetEnd * 100 - offsetStart * 100, "%");
+      break;
+    case 'ttb':
+      positionStyle.top = "".concat(offsetStart * 100, "%");
+      positionStyle.height = "".concat(offsetEnd * 100 - offsetStart * 100, "%");
+      break;
+    default:
+      positionStyle.left = "".concat(offsetStart * 100, "%");
+      positionStyle.width = "".concat(offsetEnd * 100 - offsetStart * 100, "%");
+  }
+  return /*#__PURE__*/React__namespace.createElement("div", {
+    className: classNames(trackPrefixCls, range && "".concat(trackPrefixCls, "-").concat(index + 1)),
+    style: objectWithoutProperties._objectSpread2(objectWithoutProperties._objectSpread2({}, positionStyle), style),
+    onMouseDown: onInternalStartMove,
+    onTouchStart: onInternalStartMove
+  });
+}
+
+function Tracks(props) {
+  var prefixCls = props.prefixCls,
+    style = props.style,
+    values = props.values,
+    startPoint = props.startPoint,
+    onStartMove = props.onStartMove;
+  var _React$useContext = React__namespace.useContext(SliderContext),
+    included = _React$useContext.included,
+    range = _React$useContext.range,
+    min = _React$useContext.min;
+  var trackList = React__namespace.useMemo(function () {
+    if (!range) {
+      // null value do not have track
+      if (values.length === 0) {
+        return [];
+      }
+      var startValue = startPoint !== null && startPoint !== void 0 ? startPoint : min;
+      var endValue = values[0];
+      return [{
+        start: Math.min(startValue, endValue),
+        end: Math.max(startValue, endValue)
+      }];
+    }
+    // Multiple
+    var list = [];
+    for (var i = 0; i < values.length - 1; i += 1) {
+      list.push({
+        start: values[i],
+        end: values[i + 1]
+      });
+    }
+    return list;
+  }, [values, range, startPoint, min]);
+  return included ? trackList.map(function (_ref, index) {
+    var start = _ref.start,
+      end = _ref.end;
+    return /*#__PURE__*/React__namespace.createElement(Track, {
+      index: index,
+      prefixCls: prefixCls,
+      style: getIndex(style, index),
+      start: start,
+      end: end,
+      key: index,
+      onStartMove: onStartMove
+    });
+  }) : null;
+}
+
+function Mark(props) {
+  var prefixCls = props.prefixCls,
+    style = props.style,
+    children = props.children,
+    value = props.value,
+    _onClick = props.onClick;
+  var _React$useContext = React__namespace.useContext(SliderContext),
+    min = _React$useContext.min,
+    max = _React$useContext.max,
+    direction = _React$useContext.direction,
+    includedStart = _React$useContext.includedStart,
+    includedEnd = _React$useContext.includedEnd,
+    included = _React$useContext.included;
+  var textCls = "".concat(prefixCls, "-text");
+  // ============================ Offset ============================
+  var positionStyle = getDirectionStyle(direction, value, min, max);
+  return /*#__PURE__*/React__namespace.createElement("span", {
+    className: classNames(textCls, objectWithoutProperties._defineProperty({}, "".concat(textCls, "-active"), included && includedStart <= value && value <= includedEnd)),
+    style: objectWithoutProperties._objectSpread2(objectWithoutProperties._objectSpread2({}, positionStyle), style),
+    onMouseDown: function onMouseDown(e) {
+      e.stopPropagation();
+    },
+    onClick: function onClick() {
+      _onClick(value);
+    }
+  }, children);
+}
+
+function Marks(props) {
+  var prefixCls = props.prefixCls,
+    marks = props.marks,
+    onClick = props.onClick;
+  var markPrefixCls = "".concat(prefixCls, "-mark");
+  // Not render mark if empty
+  if (!marks.length) {
+    return null;
+  }
+  return /*#__PURE__*/React__namespace.createElement("div", {
+    className: markPrefixCls
+  }, marks.map(function (_ref) {
+    var value = _ref.value,
+      style = _ref.style,
+      label = _ref.label;
+    return /*#__PURE__*/React__namespace.createElement(Mark, {
+      key: value,
+      prefixCls: markPrefixCls,
+      style: style,
+      value: value,
+      onClick: onClick
+    }, label);
+  }));
+}
+
+function Dot(props) {
+  var prefixCls = props.prefixCls,
+    value = props.value,
+    style = props.style,
+    activeStyle = props.activeStyle;
+  var _React$useContext = React__namespace.useContext(SliderContext),
+    min = _React$useContext.min,
+    max = _React$useContext.max,
+    direction = _React$useContext.direction,
+    included = _React$useContext.included,
+    includedStart = _React$useContext.includedStart,
+    includedEnd = _React$useContext.includedEnd;
+  var dotClassName = "".concat(prefixCls, "-dot");
+  var active = included && includedStart <= value && value <= includedEnd;
+  // ============================ Offset ============================
+  var mergedStyle = objectWithoutProperties._objectSpread2(objectWithoutProperties._objectSpread2({}, getDirectionStyle(direction, value, min, max)), typeof style === 'function' ? style(value) : style);
+  if (active) {
+    mergedStyle = objectWithoutProperties._objectSpread2(objectWithoutProperties._objectSpread2({}, mergedStyle), typeof activeStyle === 'function' ? activeStyle(value) : activeStyle);
+  }
+  return /*#__PURE__*/React__namespace.createElement("span", {
+    className: classNames(dotClassName, objectWithoutProperties._defineProperty({}, "".concat(dotClassName, "-active"), active)),
+    style: mergedStyle
+  });
+}
+
+function Steps(props) {
+  var prefixCls = props.prefixCls,
+    marks = props.marks,
+    dots = props.dots,
+    style = props.style,
+    activeStyle = props.activeStyle;
+  var _React$useContext = React__namespace.useContext(SliderContext),
+    min = _React$useContext.min,
+    max = _React$useContext.max,
+    step = _React$useContext.step;
+  var stepDots = React__namespace.useMemo(function () {
+    var dotSet = new Set();
+    // Add marks
+    marks.forEach(function (mark) {
+      dotSet.add(mark.value);
+    });
+    // Fill dots
+    if (dots && step !== null) {
+      var current = min;
+      while (current <= max) {
+        dotSet.add(current);
+        current += step;
+      }
+    }
+    return Array.from(dotSet);
+  }, [min, max, step, dots, marks]);
+  return /*#__PURE__*/React__namespace.createElement("div", {
+    className: "".concat(prefixCls, "-step")
+  }, stepDots.map(function (dotValue) {
+    return /*#__PURE__*/React__namespace.createElement(Dot, {
+      prefixCls: prefixCls,
+      key: dotValue,
+      value: dotValue,
+      style: style,
+      activeStyle: activeStyle
+    });
+  }));
+}
+
+function useOffset(min, max, step, markList, allowCross, pushable) {
+  var formatRangeValue = React__namespace.useCallback(function (val) {
+    var formatNextValue = isFinite(val) ? val : min;
+    formatNextValue = Math.min(max, val);
+    formatNextValue = Math.max(min, formatNextValue);
+    return formatNextValue;
+  }, [min, max]);
+  var formatStepValue = React__namespace.useCallback(function (val) {
+    if (step !== null) {
+      var stepValue = min + Math.round((formatRangeValue(val) - min) / step) * step;
+      // Cut number in case to be like 0.30000000000000004
+      var getDecimal = function getDecimal(num) {
+        return (String(num).split('.')[1] || '').length;
+      };
+      var maxDecimal = Math.max(getDecimal(step), getDecimal(max), getDecimal(min));
+      var fixedValue = Number(stepValue.toFixed(maxDecimal));
+      return min <= fixedValue && fixedValue <= max ? fixedValue : null;
+    }
+    return null;
+  }, [step, min, max, formatRangeValue]);
+  var formatValue = React__namespace.useCallback(function (val) {
+    var formatNextValue = formatRangeValue(val);
+    // List align values
+    var alignValues = markList.map(function (mark) {
+      return mark.value;
+    });
+    if (step !== null) {
+      alignValues.push(formatStepValue(val));
+    }
+    // min & max
+    alignValues.push(min, max);
+    // Align with marks
+    var closeValue = alignValues[0];
+    var closeDist = max - min;
+    alignValues.forEach(function (alignValue) {
+      var dist = Math.abs(formatNextValue - alignValue);
+      if (dist <= closeDist) {
+        closeValue = alignValue;
+        closeDist = dist;
+      }
+    });
+    return closeValue;
+  }, [min, max, markList, step, formatRangeValue, formatStepValue]);
+  // ========================== Offset ==========================
+  // Single Value
+  var offsetValue = function offsetValue(values, offset, valueIndex) {
+    var mode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'unit';
+    if (typeof offset === 'number') {
+      var nextValue;
+      var originValue = values[valueIndex];
+      // Only used for `dist` mode
+      var targetDistValue = originValue + offset;
+      // Compare next step value & mark value which is best match
+      var potentialValues = [];
+      markList.forEach(function (mark) {
+        potentialValues.push(mark.value);
+      });
+      // Min & Max
+      potentialValues.push(min, max);
+      // In case origin value is align with mark but not with step
+      potentialValues.push(formatStepValue(originValue));
+      // Put offset step value also
+      var sign = offset > 0 ? 1 : -1;
+      if (mode === 'unit') {
+        potentialValues.push(formatStepValue(originValue + sign * step));
+      } else {
+        potentialValues.push(formatStepValue(targetDistValue));
+      }
+      // Find close one
+      potentialValues = potentialValues.filter(function (val) {
+        return val !== null;
+      })
+      // Remove reverse value
+      .filter(function (val) {
+        return offset < 0 ? val <= originValue : val >= originValue;
+      });
+      if (mode === 'unit') {
+        // `unit` mode can not contain itself
+        potentialValues = potentialValues.filter(function (val) {
+          return val !== originValue;
+        });
+      }
+      var compareValue = mode === 'unit' ? originValue : targetDistValue;
+      nextValue = potentialValues[0];
+      var valueDist = Math.abs(nextValue - compareValue);
+      potentialValues.forEach(function (potentialValue) {
+        var dist = Math.abs(potentialValue - compareValue);
+        if (dist < valueDist) {
+          nextValue = potentialValue;
+          valueDist = dist;
+        }
+      });
+      // Out of range will back to range
+      if (nextValue === undefined) {
+        return offset < 0 ? min : max;
+      }
+      // `dist` mode
+      if (mode === 'dist') {
+        return nextValue;
+      }
+      // `unit` mode may need another round
+      if (Math.abs(offset) > 1) {
+        var cloneValues = objectWithoutProperties._toConsumableArray(values);
+        cloneValues[valueIndex] = nextValue;
+        return offsetValue(cloneValues, offset - sign, valueIndex, mode);
+      }
+      return nextValue;
+    } else if (offset === 'min') {
+      return min;
+    } else if (offset === 'max') {
+      return max;
+    }
+  };
+  /** Same as `offsetValue` but return `changed` mark to tell value changed */
+  var offsetChangedValue = function offsetChangedValue(values, offset, valueIndex) {
+    var mode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'unit';
+    var originValue = values[valueIndex];
+    var nextValue = offsetValue(values, offset, valueIndex, mode);
+    return {
+      value: nextValue,
+      changed: nextValue !== originValue
+    };
+  };
+  var needPush = function needPush(dist) {
+    return pushable === null && dist === 0 || typeof pushable === 'number' && dist < pushable;
+  };
+  // Values
+  var offsetValues = function offsetValues(values, offset, valueIndex) {
+    var mode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'unit';
+    var nextValues = values.map(formatValue);
+    var originValue = nextValues[valueIndex];
+    var nextValue = offsetValue(nextValues, offset, valueIndex, mode);
+    nextValues[valueIndex] = nextValue;
+    if (allowCross === false) {
+      // >>>>> Allow Cross
+      var pushNum = pushable || 0;
+      // ============ AllowCross ===============
+      if (valueIndex > 0 && nextValues[valueIndex - 1] !== originValue) {
+        nextValues[valueIndex] = Math.max(nextValues[valueIndex], nextValues[valueIndex - 1] + pushNum);
+      }
+      if (valueIndex < nextValues.length - 1 && nextValues[valueIndex + 1] !== originValue) {
+        nextValues[valueIndex] = Math.min(nextValues[valueIndex], nextValues[valueIndex + 1] - pushNum);
+      }
+    } else if (typeof pushable === 'number' || pushable === null) {
+      // >>>>> Pushable
+      // =============== Push ==================
+      // >>>>>> Basic push
+      // End values
+      for (var i = valueIndex + 1; i < nextValues.length; i += 1) {
+        var changed = true;
+        while (needPush(nextValues[i] - nextValues[i - 1]) && changed) {
+          var _offsetChangedValue = offsetChangedValue(nextValues, 1, i);
+          nextValues[i] = _offsetChangedValue.value;
+          changed = _offsetChangedValue.changed;
+        }
+      }
+      // Start values
+      for (var _i = valueIndex; _i > 0; _i -= 1) {
+        var _changed = true;
+        while (needPush(nextValues[_i] - nextValues[_i - 1]) && _changed) {
+          var _offsetChangedValue2 = offsetChangedValue(nextValues, -1, _i - 1);
+          nextValues[_i - 1] = _offsetChangedValue2.value;
+          _changed = _offsetChangedValue2.changed;
+        }
+      }
+      // >>>>> Revert back to safe push range
+      // End to Start
+      for (var _i2 = nextValues.length - 1; _i2 > 0; _i2 -= 1) {
+        var _changed2 = true;
+        while (needPush(nextValues[_i2] - nextValues[_i2 - 1]) && _changed2) {
+          var _offsetChangedValue3 = offsetChangedValue(nextValues, -1, _i2 - 1);
+          nextValues[_i2 - 1] = _offsetChangedValue3.value;
+          _changed2 = _offsetChangedValue3.changed;
+        }
+      }
+      // Start to End
+      for (var _i3 = 0; _i3 < nextValues.length - 1; _i3 += 1) {
+        var _changed3 = true;
+        while (needPush(nextValues[_i3 + 1] - nextValues[_i3]) && _changed3) {
+          var _offsetChangedValue4 = offsetChangedValue(nextValues, 1, _i3 + 1);
+          nextValues[_i3 + 1] = _offsetChangedValue4.value;
+          _changed3 = _offsetChangedValue4.changed;
+        }
+      }
+    }
+    return {
+      value: nextValues[valueIndex],
+      values: nextValues
+    };
+  };
+  return [formatValue, offsetValues];
+}
+
+var Slider = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
+  var _classNames;
+  var _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? 'rc-slider' : _props$prefixCls,
+    className = props.className,
+    style = props.style,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$keyboard = props.keyboard,
+    keyboard = _props$keyboard === void 0 ? true : _props$keyboard,
+    autoFocus = props.autoFocus,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    _props$min = props.min,
+    min = _props$min === void 0 ? 0 : _props$min,
+    _props$max = props.max,
+    max = _props$max === void 0 ? 100 : _props$max,
+    _props$step = props.step,
+    step = _props$step === void 0 ? 1 : _props$step,
+    value = props.value,
+    defaultValue = props.defaultValue,
+    range = props.range,
+    count = props.count,
+    onChange = props.onChange,
+    onBeforeChange = props.onBeforeChange,
+    onAfterChange = props.onAfterChange,
+    _props$allowCross = props.allowCross,
+    allowCross = _props$allowCross === void 0 ? true : _props$allowCross,
+    _props$pushable = props.pushable,
+    pushable = _props$pushable === void 0 ? false : _props$pushable,
+    draggableTrack = props.draggableTrack,
+    reverse = props.reverse,
+    vertical = props.vertical,
+    _props$included = props.included,
+    included = _props$included === void 0 ? true : _props$included,
+    startPoint = props.startPoint,
+    trackStyle = props.trackStyle,
+    handleStyle = props.handleStyle,
+    railStyle = props.railStyle,
+    dotStyle = props.dotStyle,
+    activeDotStyle = props.activeDotStyle,
+    marks = props.marks,
+    dots = props.dots,
+    handleRender = props.handleRender,
+    _props$tabIndex = props.tabIndex,
+    tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
+    ariaLabelForHandle = props.ariaLabelForHandle,
+    ariaLabelledByForHandle = props.ariaLabelledByForHandle,
+    ariaValueTextFormatterForHandle = props.ariaValueTextFormatterForHandle;
+  var handlesRef = React__namespace.useRef();
+  var containerRef = React__namespace.useRef();
+  var direction = React__namespace.useMemo(function () {
+    if (vertical) {
+      return reverse ? 'ttb' : 'btt';
+    }
+    return reverse ? 'rtl' : 'ltr';
+  }, [reverse, vertical]);
+  // ============================ Range =============================
+  var mergedMin = React__namespace.useMemo(function () {
+    return isFinite(min) ? min : 0;
+  }, [min]);
+  var mergedMax = React__namespace.useMemo(function () {
+    return isFinite(max) ? max : 100;
+  }, [max]);
+  // ============================= Step =============================
+  var mergedStep = React__namespace.useMemo(function () {
+    return step !== null && step <= 0 ? 1 : step;
+  }, [step]);
+  // ============================= Push =============================
+  var mergedPush = React__namespace.useMemo(function () {
+    if (pushable === true) {
+      return mergedStep;
+    }
+    return pushable >= 0 ? pushable : false;
+  }, [pushable, mergedStep]);
+  // ============================ Marks =============================
+  var markList = React__namespace.useMemo(function () {
+    var keys = Object.keys(marks || {});
+    return keys.map(function (key) {
+      var mark = marks[key];
+      var markObj = {
+        value: Number(key)
+      };
+      if (mark && objectWithoutProperties._typeof(mark) === 'object' && ! /*#__PURE__*/React__namespace.isValidElement(mark) && ('label' in mark || 'style' in mark)) {
+        markObj.style = mark.style;
+        markObj.label = mark.label;
+      } else {
+        markObj.label = mark;
+      }
+      return markObj;
+    }).filter(function (_ref) {
+      var label = _ref.label;
+      return label || typeof label === 'number';
+    }).sort(function (a, b) {
+      return a.value - b.value;
+    });
+  }, [marks]);
+  // ============================ Format ============================
+  var _useOffset = useOffset(mergedMin, mergedMax, mergedStep, markList, allowCross, mergedPush),
+    _useOffset2 = objectWithoutProperties._slicedToArray(_useOffset, 2),
+    formatValue = _useOffset2[0],
+    offsetValues = _useOffset2[1];
+  // ============================ Values ============================
+  var _useMergedState = useMergedState(defaultValue, {
+      value: value
+    }),
+    _useMergedState2 = objectWithoutProperties._slicedToArray(_useMergedState, 2),
+    mergedValue = _useMergedState2[0],
+    setValue = _useMergedState2[1];
+  var rawValues = React__namespace.useMemo(function () {
+    var valueList = mergedValue === null || mergedValue === undefined ? [] : Array.isArray(mergedValue) ? mergedValue : [mergedValue];
+    var _valueList = objectWithoutProperties._slicedToArray(valueList, 1),
+      _valueList$ = _valueList[0],
+      val0 = _valueList$ === void 0 ? mergedMin : _valueList$;
+    var returnValues = mergedValue === null ? [] : [val0];
+    // Format as range
+    if (range) {
+      returnValues = objectWithoutProperties._toConsumableArray(valueList);
+      // When count provided or value is `undefined`, we fill values
+      if (count || mergedValue === undefined) {
+        var pointCount = count >= 0 ? count + 1 : 2;
+        returnValues = returnValues.slice(0, pointCount);
+        // Fill with count
+        while (returnValues.length < pointCount) {
+          var _returnValues;
+          returnValues.push((_returnValues = returnValues[returnValues.length - 1]) !== null && _returnValues !== void 0 ? _returnValues : mergedMin);
+        }
+      }
+      returnValues.sort(function (a, b) {
+        return a - b;
+      });
+    }
+    // Align in range
+    returnValues.forEach(function (val, index) {
+      returnValues[index] = formatValue(val);
+    });
+    return returnValues;
+  }, [mergedValue, range, mergedMin, count, formatValue]);
+  // =========================== onChange ===========================
+  var rawValuesRef = React__namespace.useRef(rawValues);
+  rawValuesRef.current = rawValues;
+  var getTriggerValue = function getTriggerValue(triggerValues) {
+    return range ? triggerValues : triggerValues[0];
+  };
+  var triggerChange = function triggerChange(nextValues) {
+    // Order first
+    var cloneNextValues = objectWithoutProperties._toConsumableArray(nextValues).sort(function (a, b) {
+      return a - b;
+    });
+    // Trigger event if needed
+    if (onChange && !isEqual(cloneNextValues, rawValuesRef.current, true)) {
+      onChange(getTriggerValue(cloneNextValues));
+    }
+    // We set this later since it will re-render component immediately
+    setValue(cloneNextValues);
+  };
+  var changeToCloseValue = function changeToCloseValue(newValue) {
+    if (!disabled) {
+      var valueIndex = 0;
+      var valueDist = mergedMax - mergedMin;
+      rawValues.forEach(function (val, index) {
+        var dist = Math.abs(newValue - val);
+        if (dist <= valueDist) {
+          valueDist = dist;
+          valueIndex = index;
+        }
+      });
+      // Create new values
+      var cloneNextValues = objectWithoutProperties._toConsumableArray(rawValues);
+      cloneNextValues[valueIndex] = newValue;
+      // Fill value to match default 2
+      if (range && !rawValues.length && count === undefined) {
+        cloneNextValues.push(newValue);
+      }
+      onBeforeChange === null || onBeforeChange === void 0 ? void 0 : onBeforeChange(getTriggerValue(cloneNextValues));
+      triggerChange(cloneNextValues);
+      onAfterChange === null || onAfterChange === void 0 ? void 0 : onAfterChange(getTriggerValue(cloneNextValues));
+    }
+  };
+  // ============================ Click =============================
+  var onSliderMouseDown = function onSliderMouseDown(e) {
+    e.preventDefault();
+    var _containerRef$current = containerRef.current.getBoundingClientRect(),
+      width = _containerRef$current.width,
+      height = _containerRef$current.height,
+      left = _containerRef$current.left,
+      top = _containerRef$current.top,
+      bottom = _containerRef$current.bottom,
+      right = _containerRef$current.right;
+    var clientX = e.clientX,
+      clientY = e.clientY;
+    var percent;
+    switch (direction) {
+      case 'btt':
+        percent = (bottom - clientY) / height;
+        break;
+      case 'ttb':
+        percent = (clientY - top) / height;
+        break;
+      case 'rtl':
+        percent = (right - clientX) / width;
+        break;
+      default:
+        percent = (clientX - left) / width;
+    }
+    var nextValue = mergedMin + percent * (mergedMax - mergedMin);
+    changeToCloseValue(formatValue(nextValue));
+  };
+  // =========================== Keyboard ===========================
+  var _React$useState = React__namespace.useState(null),
+    _React$useState2 = objectWithoutProperties._slicedToArray(_React$useState, 2),
+    keyboardValue = _React$useState2[0],
+    setKeyboardValue = _React$useState2[1];
+  var onHandleOffsetChange = function onHandleOffsetChange(offset, valueIndex) {
+    if (!disabled) {
+      var next = offsetValues(rawValues, offset, valueIndex);
+      onBeforeChange === null || onBeforeChange === void 0 ? void 0 : onBeforeChange(getTriggerValue(rawValues));
+      triggerChange(next.values);
+      onAfterChange === null || onAfterChange === void 0 ? void 0 : onAfterChange(getTriggerValue(next.values));
+      setKeyboardValue(next.value);
+    }
+  };
+  React__namespace.useEffect(function () {
+    if (keyboardValue !== null) {
+      var valueIndex = rawValues.indexOf(keyboardValue);
+      if (valueIndex >= 0) {
+        handlesRef.current.focus(valueIndex);
+      }
+    }
+    setKeyboardValue(null);
+  }, [keyboardValue]);
+  // ============================= Drag =============================
+  var mergedDraggableTrack = React__namespace.useMemo(function () {
+    if (draggableTrack && mergedStep === null) {
+      if (process.env.NODE_ENV !== 'production') {
+        warningOnce(false, '`draggableTrack` is not supported when `step` is `null`.');
+      }
+      return false;
+    }
+    return draggableTrack;
+  }, [draggableTrack, mergedStep]);
+  var finishChange = function finishChange() {
+    onAfterChange === null || onAfterChange === void 0 ? void 0 : onAfterChange(getTriggerValue(rawValuesRef.current));
+  };
+  var _useDrag = useDrag(containerRef, direction, rawValues, mergedMin, mergedMax, formatValue, triggerChange, finishChange, offsetValues),
+    _useDrag2 = objectWithoutProperties._slicedToArray(_useDrag, 4),
+    draggingIndex = _useDrag2[0],
+    draggingValue = _useDrag2[1],
+    cacheValues = _useDrag2[2],
+    onStartDrag = _useDrag2[3];
+  var onStartMove = function onStartMove(e, valueIndex) {
+    onStartDrag(e, valueIndex);
+    onBeforeChange === null || onBeforeChange === void 0 ? void 0 : onBeforeChange(getTriggerValue(rawValuesRef.current));
+  };
+  // Auto focus for updated handle
+  var dragging = draggingIndex !== -1;
+  React__namespace.useEffect(function () {
+    if (!dragging) {
+      var valueIndex = rawValues.lastIndexOf(draggingValue);
+      handlesRef.current.focus(valueIndex);
+    }
+  }, [dragging]);
+  // =========================== Included ===========================
+  var sortedCacheValues = React__namespace.useMemo(function () {
+    return objectWithoutProperties._toConsumableArray(cacheValues).sort(function (a, b) {
+      return a - b;
+    });
+  }, [cacheValues]);
+  // Provide a range values with included [min, max]
+  // Used for Track, Mark & Dot
+  var _React$useMemo = React__namespace.useMemo(function () {
+      if (!range) {
+        return [mergedMin, sortedCacheValues[0]];
+      }
+      return [sortedCacheValues[0], sortedCacheValues[sortedCacheValues.length - 1]];
+    }, [sortedCacheValues, range, mergedMin]),
+    _React$useMemo2 = objectWithoutProperties._slicedToArray(_React$useMemo, 2),
+    includedStart = _React$useMemo2[0],
+    includedEnd = _React$useMemo2[1];
+  // ============================= Refs =============================
+  React__namespace.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        handlesRef.current.focus(0);
+      },
+      blur: function blur() {
+        var _document = document,
+          activeElement = _document.activeElement;
+        if (containerRef.current.contains(activeElement)) {
+          activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur();
+        }
+      }
+    };
+  });
+  // ========================== Auto Focus ==========================
+  React__namespace.useEffect(function () {
+    if (autoFocus) {
+      handlesRef.current.focus(0);
+    }
+  }, []);
+  // =========================== Context ============================
+  var context = React__namespace.useMemo(function () {
+    return {
+      min: mergedMin,
+      max: mergedMax,
+      direction: direction,
+      disabled: disabled,
+      keyboard: keyboard,
+      step: mergedStep,
+      included: included,
+      includedStart: includedStart,
+      includedEnd: includedEnd,
+      range: range,
+      tabIndex: tabIndex,
+      ariaLabelForHandle: ariaLabelForHandle,
+      ariaLabelledByForHandle: ariaLabelledByForHandle,
+      ariaValueTextFormatterForHandle: ariaValueTextFormatterForHandle
+    };
+  }, [mergedMin, mergedMax, direction, disabled, keyboard, mergedStep, included, includedStart, includedEnd, range, tabIndex, ariaLabelForHandle, ariaLabelledByForHandle, ariaValueTextFormatterForHandle]);
+  // ============================ Render ============================
+  return /*#__PURE__*/React__namespace.createElement(SliderContext.Provider, {
+    value: context
+  }, /*#__PURE__*/React__namespace.createElement("div", {
+    ref: containerRef,
+    className: classNames(prefixCls, className, (_classNames = {}, objectWithoutProperties._defineProperty(_classNames, "".concat(prefixCls, "-disabled"), disabled), objectWithoutProperties._defineProperty(_classNames, "".concat(prefixCls, "-vertical"), vertical), objectWithoutProperties._defineProperty(_classNames, "".concat(prefixCls, "-horizontal"), !vertical), objectWithoutProperties._defineProperty(_classNames, "".concat(prefixCls, "-with-marks"), markList.length), _classNames)),
+    style: style,
+    onMouseDown: onSliderMouseDown
+  }, /*#__PURE__*/React__namespace.createElement("div", {
+    className: "".concat(prefixCls, "-rail"),
+    style: railStyle
+  }), /*#__PURE__*/React__namespace.createElement(Tracks, {
+    prefixCls: prefixCls,
+    style: trackStyle,
+    values: sortedCacheValues,
+    startPoint: startPoint,
+    onStartMove: mergedDraggableTrack ? onStartMove : null
+  }), /*#__PURE__*/React__namespace.createElement(Steps, {
+    prefixCls: prefixCls,
+    marks: markList,
+    dots: dots,
+    style: dotStyle,
+    activeStyle: activeDotStyle
+  }), /*#__PURE__*/React__namespace.createElement(Handles, {
+    ref: handlesRef,
+    prefixCls: prefixCls,
+    style: handleStyle,
+    values: cacheValues,
+    draggingIndex: draggingIndex,
+    onStartMove: onStartMove,
+    onOffsetChange: onHandleOffsetChange,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    handleRender: handleRender
+  }), /*#__PURE__*/React__namespace.createElement(Marks, {
+    prefixCls: prefixCls,
+    marks: markList,
+    onClick: changeToCloseValue
+  })));
+});
+if (process.env.NODE_ENV !== 'production') {
+  Slider.displayName = 'Slider';
+}
+
+function RangeSlider(props) {
+  var after = props.after,
+    before = props.before,
+    children = props.children,
+    className = props.className,
+    set = props.set,
+    disabled = props.disabled,
+    min = props.min,
+    max = props.max,
+    pushable = props.pushable,
+    range = props.range,
+    vertical = props.vertical,
+    value = props.value,
+    onChangeSlider = props.onChangeSlider;
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var trackFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'range-slider-track-fill_',
+    propsKey: 'fillTrack'
+  });
+  var railFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'range-slider-rail-fill_',
+    propsKey: 'fillRail'
+  });
+  var handleFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'range-slider-handle-fill_',
+    propsKey: 'fillHandle'
+  });
+  var handleFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'range-slider-handle-fill-hover_',
+    propsKey: 'fillHandleHover'
+  });
+  var handleDraggingFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'range-slider-handle-dragging-fill_',
+    propsKey: 'fillHandleDragging'
+  });
+  var handleDraggingFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'range-slider-handle-dragging-fill-hover_',
+    propsKey: 'fillHandleDraggingHover'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'filter_shape_',
+    propsKey: 'shape'
+  });
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    rangeSliderStyles = _useStyles.styles;
+  return /*#__PURE__*/React__namespace.default.createElement("div", {
+    className: clsx__default.default(className, 'range-slider', set && "range-slider_set_" + set, fillClass, trackFillClass, railFillClass, handleFillClass, handleFillHoverClass, handleDraggingFillClass, handleDraggingFillHoverClass, shapeClass, widthClass),
+    style: rangeSliderStyles
+  }, before && /*#__PURE__*/React__namespace.default.createElement("div", {
+    className: "range-slider__before"
+  }, before), /*#__PURE__*/React__namespace.default.createElement(Slider, {
+    className: "range-slider__wrapper",
+    disabled: disabled,
+    min: min,
+    max: max,
+    pushable: pushable,
+    range: range,
+    vertical: vertical,
+    value: value,
+    onChange: onChangeSlider
+  }), children, after && /*#__PURE__*/React__namespace.default.createElement("div", {
+    className: "range-slider__after"
+  }, after));
+}
+RangeSlider.propTypes = {
+  after: PropTypes__default.default.any,
+  before: PropTypes__default.default.any,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  desc: PropTypes__default.default.string,
+  descSize: PropTypes__default.default.string,
+  descTextColor: PropTypes__default.default.string,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  set: PropTypes__default.default.string,
+  shape: PropTypes__default.default.oneOf(shape.default),
+  shapeDesktop: PropTypes__default.default.oneOf(shape.default),
+  shapeMobile: PropTypes__default.default.oneOf(shape.default),
+  shapeTablet: PropTypes__default.default.oneOf(shape.default),
+  width: PropTypes__default.default.oneOf(width.default),
+  widthDesktop: PropTypes__default.default.oneOf(width.default),
+  widthMobile: PropTypes__default.default.oneOf(width.default),
+  widthTablet: PropTypes__default.default.oneOf(width.default)
+};
+
+exports.RangeSlider = RangeSlider;