rc-slider - npm Package Compare versions

Comparing version 10.2.1 to 10.3.0

es/context.d.ts

 import * as React from 'react';
-import type { AriaValueFormat, Direction } from './interface';
+import type { AriaValueFormat, Direction, SliderClassNames, SliderStyles } from './interface';
 export interface SliderContextProps {
@@ -18,4 +18,6 @@ min: number;
     ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[];
+    classNames: SliderClassNames;
+    styles: SliderStyles;
 }
 declare const SliderContext: React.Context<SliderContextProps>;
 export default SliderContext;

es/context.js

@@ -10,4 +10,6 @@ import * as React from 'react';
   tabIndex: 0,
-  keyboard: true
+  keyboard: true,
+  styles: {},
+  classNames: {}
 });
 export default SliderContext;

es/Handles/Handle.js

@@ -6,9 +6,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 var _excluded = ["prefixCls", "value", "valueIndex", "onStartMove", "style", "render", "dragging", "onOffsetChange"];
+import cls from 'classnames';
+import KeyCode from "rc-util/es/KeyCode";
 import * as React from 'react';
-import classNames from 'classnames';
-import KeyCode from "rc-util/es/KeyCode";
-import SliderContext from '../context';
-import { getDirectionStyle, getIndex } from '../util';
+import SliderContext from "../context";
+import { getDirectionStyle, getIndex } from "../util";
 var Handle = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _classNames, _getIndex;
+  var _cls, _getIndex;
   var prefixCls = props.prefixCls,
@@ -33,4 +33,7 @@ value = props.value,
     ariaLabelledByForHandle = _React$useContext.ariaLabelledByForHandle,
-    ariaValueTextFormatterForHandle = _React$useContext.ariaValueTextFormatterForHandle;
+    ariaValueTextFormatterForHandle = _React$useContext.ariaValueTextFormatterForHandle,
+    styles = _React$useContext.styles,
+    classNames = _React$useContext.classNames;
   var handlePrefixCls = "".concat(prefixCls, "-handle");
+
   // ============================ Events ============================
@@ -42,2 +45,3 @@ var onInternalStartMove = function onInternalStartMove(e) {
   };
+
   // =========================== Keyboard ===========================
@@ -47,2 +51,3 @@ var onKeyDown = function onKeyDown(e) {
       var offset = null;
+
       // Change the value
@@ -56,2 +61,3 @@ switch (e.which || e.keyCode) {
           break;
+
         // Up is plus
@@ -61,2 +67,3 @@ case KeyCode.UP:
           break;
+
         // Down is minus
@@ -85,9 +92,11 @@ case KeyCode.DOWN:
   };
+
   // ============================ Offset ============================
   var positionStyle = getDirectionStyle(direction, value, min, max);
+
   // ============================ Render ============================
   var handleNode = /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
-    className: classNames(handlePrefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(handlePrefixCls, "-").concat(valueIndex + 1), range), _defineProperty(_classNames, "".concat(handlePrefixCls, "-dragging"), dragging), _classNames)),
-    style: _objectSpread(_objectSpread({}, positionStyle), style),
+    className: cls(handlePrefixCls, (_cls = {}, _defineProperty(_cls, "".concat(handlePrefixCls, "-").concat(valueIndex + 1), range), _defineProperty(_cls, "".concat(handlePrefixCls, "-dragging"), dragging), _cls), classNames.handle),
+    style: _objectSpread(_objectSpread(_objectSpread({}, positionStyle), style), styles.handle),
     onMouseDown: onInternalStartMove,
@@ -107,2 +116,3 @@ onTouchStart: onInternalStartMove,
   }, restProps));
+
   // Customize
@@ -109,0 +119,0 @@ if (render) {

es/Handles/index.js

@@ -5,4 +5,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import Handle from './Handle';
-import { getIndex } from '../util';
+import Handle from "./Handle";
+import { getIndex } from "../util";
 var Handles = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -9,0 +9,0 @@ var prefixCls = props.prefixCls,

es/hooks/useDrag.js

@@ -35,2 +35,3 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
   }, [rawValues, draggingIndex]);
+
   // Clean up event
@@ -59,2 +60,3 @@ React.useEffect(function () {
     // Basic point offset
+
     if (valueIndex === -1) {
@@ -66,2 +68,3 @@ // >>>> Dragging on the track
       var maxEndOffset = max - endValue;
+
       // Get valid offset
@@ -71,2 +74,3 @@ var offset = offsetPercent * (max - min);
       offset = Math.min(offset, maxEndOffset);
+
       // Use first value to revert back of valid offset (like steps marks)
@@ -82,2 +86,3 @@ var formatStartValue = formatValue(startValue + offset);
       var offsetDist = (max - min) * offsetPercent;
+
       // Always start with the valueIndex origin value
@@ -90,2 +95,3 @@ var cloneValues = _toConsumableArray(cacheValues);
   };
+
   // Resolve closure
@@ -103,2 +109,3 @@ var updateCacheValueRef = React.useRef(updateCacheValue);
       startY = _getPosition.pageY;
+
     // Moving
@@ -131,2 +138,3 @@ var onMouseMove = function onMouseMove(event) {
     };
+
     // End
@@ -151,2 +159,3 @@ var onMouseUp = function onMouseUp(event) {
   };
+
   // Only return cache value when it mapping with rawValues
@@ -153,0 +162,0 @@ var returnValues = React.useMemo(function () {

es/hooks/useOffset.js

 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
+
+/** Format the value in the range of [min, max] */
+
+/** Format value align with step */
+
+/** Format value align with step & marks */
+
 export default function useOffset(min, max, step, markList, allowCross, pushable) {
@@ -13,2 +20,3 @@ var formatRangeValue = React.useCallback(function (val) {
       var stepValue = min + Math.round((formatRangeValue(val) - min) / step) * step;
+
       // Cut number in case to be like 0.30000000000000004
@@ -26,2 +34,3 @@ var getDecimal = function getDecimal(num) {
     var formatNextValue = formatRangeValue(val);
+
     // List align values
@@ -34,4 +43,6 @@ var alignValues = markList.map(function (mark) {
     }
+
     // min & max
     alignValues.push(min, max);
+
     // Align with marks
@@ -49,2 +60,3 @@ var closeValue = alignValues[0];
   }, [min, max, markList, step, formatRangeValue, formatStepValue]);
+
   // ========================== Offset ==========================
@@ -57,4 +69,6 @@ // Single Value
       var originValue = values[valueIndex];
+
       // Only used for `dist` mode
       var targetDistValue = originValue + offset;
+
       // Compare next step value & mark value which is best match
@@ -65,6 +79,9 @@ var potentialValues = [];
       });
+
       // 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
@@ -77,2 +94,3 @@ var sign = offset > 0 ? 1 : -1;
       }
+
       // Find close one
@@ -102,2 +120,3 @@ potentialValues = potentialValues.filter(function (val) {
       });
+
       // Out of range will back to range
@@ -107,2 +126,3 @@ if (nextValue === undefined) {
       }
+
       // `dist` mode
@@ -112,2 +132,3 @@ if (mode === 'dist') {
       }
+
       // `unit` mode may need another round
@@ -126,2 +147,3 @@ if (Math.abs(offset) > 1) {
   };
+
   /** Same as `offsetValue` but return `changed` mark to tell value changed */
@@ -140,2 +162,3 @@ var offsetChangedValue = function offsetChangedValue(values, offset, valueIndex) {
   };
+
   // Values
@@ -151,2 +174,3 @@ var offsetValues = function offsetValues(values, offset, valueIndex) {
       var pushNum = pushable || 0;
+
       // ============ AllowCross ===============
@@ -162,2 +186,3 @@ if (valueIndex > 0 && nextValues[valueIndex - 1] !== originValue) {
       // =============== Push ==================
+
       // >>>>>> Basic push
@@ -173,2 +198,3 @@ // End values
       }
+
       // Start values
@@ -183,2 +209,3 @@ for (var _i = valueIndex; _i > 0; _i -= 1) {
       }
+
       // >>>>> Revert back to safe push range
@@ -194,2 +221,3 @@ // End to Start
       }
+
       // Start to End
@@ -196,0 +224,0 @@ for (var _i3 = 0; _i3 < nextValues.length - 1; _i3 += 1) {

es/index.js

@@ -1,2 +0,2 @@
-import Slider from './Slider';
+import Slider from "./Slider";
 export default Slider;

es/interface.d.ts

@@ -5,1 +5,4 @@ import type React from 'react';
 export type AriaValueFormat = (value: number) => string;
+export type SemanticName = 'tracks' | 'track' | 'rail' | 'handle';
+export type SliderClassNames = Partial<Record<SemanticName, string>>;
+export type SliderStyles = Partial<Record<SemanticName, React.CSSProperties>>;

es/Marks/index.js

 import * as React from 'react';
-import Mark from './Mark';
+import Mark from "./Mark";
 export default function Marks(props) {
@@ -8,2 +8,3 @@ var prefixCls = props.prefixCls,
   var markPrefixCls = "".concat(prefixCls, "-mark");
+
   // Not render mark if empty
@@ -10,0 +11,0 @@ if (!marks.length) {

es/Marks/Mark.js

@@ -5,4 +5,4 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import classNames from 'classnames';
-import { getDirectionStyle } from '../util';
-import SliderContext from '../context';
+import { getDirectionStyle } from "../util";
+import SliderContext from "../context";
 export default function Mark(props) {
@@ -22,2 +22,3 @@ var prefixCls = props.prefixCls,
   var textCls = "".concat(prefixCls, "-text");
+
   // ============================ Offset ============================
@@ -24,0 +25,0 @@ var positionStyle = getDirectionStyle(direction, value, min, max);

es/Slider.d.ts

 import * as React from 'react';
 import type { HandlesProps } from './Handles';
-import type { AriaValueFormat } from './interface';
+import type { AriaValueFormat, SliderClassNames, SliderStyles } from './interface';
 import type { MarkObj } from './Marks';
@@ -22,2 +22,4 @@ /**
     style?: React.CSSProperties;
+    classNames?: SliderClassNames;
+    styles?: SliderStyles;
     disabled?: boolean;
@@ -48,4 +50,7 @@ keyboard?: boolean;
     startPoint?: number;
+    /** @deprecated Please use `styles.track` instead */
     trackStyle?: React.CSSProperties | React.CSSProperties[];
+    /** @deprecated Please use `styles.handle` instead */
     handleStyle?: React.CSSProperties | React.CSSProperties[];
+    /** @deprecated Please use `styles.rail` instead */
     railStyle?: React.CSSProperties;
@@ -52,0 +57,0 @@ dotStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);

es/Slider.js

@@ -0,1 +1,2 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
@@ -5,16 +6,31 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
-import * as React from 'react';
-import classNames from 'classnames';
+import cls from 'classnames';
+import useMergedState from "rc-util/es/hooks/useMergedState";
 import isEqual from "rc-util/es/isEqual";
-import useMergedState from "rc-util/es/hooks/useMergedState";
-import Handles from './Handles';
-import useDrag from './hooks/useDrag';
-import SliderContext from './context';
-import Tracks from './Tracks';
-import Marks from './Marks';
-import Steps from './Steps';
-import useOffset from './hooks/useOffset';
 import warning from "rc-util/es/warning";
+import * as React from 'react';
+import SliderContext from "./context";
+import Handles from "./Handles";
+import useDrag from "./hooks/useDrag";
+import useOffset from "./hooks/useOffset";
+import Marks from "./Marks";
+import Steps from "./Steps";
+import Tracks from "./Tracks";
+
+/**
+ * New:
+ * - click mark to update range value
+ * - handleRender
+ * - Fix handle with count not correct
+ * - Fix pushable not work in some case
+ * - No more FindDOMNode
+ * - Move all position related style into inline style
+ * - Key: up is plus, down is minus
+ * - fix Key with step = null not align with marks
+ * - Change range should not trigger onChange
+ * - keyboard support pushable
+ */
+
 var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _classNames;
+  var _cls;
   var _props$prefixCls = props.prefixCls,
@@ -24,2 +40,4 @@ prefixCls = _props$prefixCls === void 0 ? 'rc-slider' : _props$prefixCls,
     style = props.style,
+    classNames = props.classNames,
+    styles = props.styles,
     _props$disabled = props.disabled,
@@ -76,2 +94,3 @@ disabled = _props$disabled === void 0 ? false : _props$disabled,
   }, [reverse, vertical]);
+
   // ============================ Range =============================
@@ -84,2 +103,3 @@ var mergedMin = React.useMemo(function () {
   }, [max]);
+
   // ============================= Step =============================
@@ -89,2 +109,3 @@ var mergedStep = React.useMemo(function () {
   }, [step]);
+
   // ============================= Push =============================
@@ -97,2 +118,3 @@ var mergedPush = React.useMemo(function () {
   }, [pushable, mergedStep]);
+
   // ============================ Marks =============================
@@ -120,2 +142,3 @@ var markList = React.useMemo(function () {
   }, [marks]);
+
   // ============================ Format ============================
@@ -126,2 +149,3 @@ var _useOffset = useOffset(mergedMin, mergedMax, mergedStep, markList, allowCross, mergedPush),
     offsetValues = _useOffset2[1];
+
   // ============================ Values ============================
@@ -140,5 +164,7 @@ var _useMergedState = useMergedState(defaultValue, {
     var returnValues = mergedValue === null ? [] : [val0];
+
     // Format as range
     if (range) {
       returnValues = _toConsumableArray(valueList);
+
       // When count provided or value is `undefined`, we fill values
@@ -148,2 +174,3 @@ if (count || mergedValue === undefined) {
         returnValues = returnValues.slice(0, pointCount);
+
         // Fill with count
@@ -159,2 +186,3 @@ while (returnValues.length < pointCount) {
     }
+
     // Align in range
@@ -166,2 +194,3 @@ returnValues.forEach(function (val, index) {
   }, [mergedValue, range, mergedMin, count, formatValue]);
+
   // =========================== onChange ===========================
@@ -178,2 +207,3 @@ var rawValuesRef = React.useRef(rawValues);
     });
+
     // Trigger event if needed
@@ -183,2 +213,3 @@ if (onChange && !isEqual(cloneNextValues, rawValuesRef.current, true)) {
     }
+
     // We set this later since it will re-render component immediately
@@ -198,5 +229,7 @@ setValue(cloneNextValues);
       });
+
       // Create new values
       var cloneNextValues = _toConsumableArray(rawValues);
       cloneNextValues[valueIndex] = newValue;
+
       // Fill value to match default 2
@@ -211,2 +244,3 @@ if (range && !rawValues.length && count === undefined) {
   };
+
   // ============================ Click =============================
@@ -241,2 +275,3 @@ var onSliderMouseDown = function onSliderMouseDown(e) {
   };
+
   // =========================== Keyboard ===========================
@@ -265,2 +300,3 @@ var _React$useState = React.useState(null),
   }, [keyboardValue]);
+
   // ============================= Drag =============================
@@ -289,2 +325,3 @@ var mergedDraggableTrack = React.useMemo(function () {
   };
+
   // Auto focus for updated handle
@@ -298,2 +335,3 @@ var dragging = draggingIndex !== -1;
   }, [dragging]);
+
   // =========================== Included ===========================
@@ -305,2 +343,3 @@ var sortedCacheValues = React.useMemo(function () {
   }, [cacheValues]);
+
   // Provide a range values with included [min, max]
@@ -317,2 +356,3 @@ // Used for Track, Mark & Dot
     includedEnd = _React$useMemo2[1];
+
   // ============================= Refs =============================
@@ -333,2 +373,3 @@ React.useImperativeHandle(ref, function () {
   });
+
   // ========================== Auto Focus ==========================
@@ -340,2 +381,3 @@ React.useEffect(function () {
   }, []);
+
   // =========================== Context ============================
@@ -357,5 +399,8 @@ var context = React.useMemo(function () {
       ariaLabelledByForHandle: ariaLabelledByForHandle,
-      ariaValueTextFormatterForHandle: ariaValueTextFormatterForHandle
+      ariaValueTextFormatterForHandle: ariaValueTextFormatterForHandle,
+      styles: styles || {},
+      classNames: classNames || {}
     };
-  }, [mergedMin, mergedMax, direction, disabled, keyboard, mergedStep, included, includedStart, includedEnd, range, tabIndex, ariaLabelForHandle, ariaLabelledByForHandle, ariaValueTextFormatterForHandle]);
+  }, [mergedMin, mergedMax, direction, disabled, keyboard, mergedStep, included, includedStart, includedEnd, range, tabIndex, ariaLabelForHandle, ariaLabelledByForHandle, ariaValueTextFormatterForHandle, styles, classNames]);
+
   // ============================ Render ============================
@@ -366,8 +411,8 @@ return /*#__PURE__*/React.createElement(SliderContext.Provider, {
     ref: containerRef,
-    className: classNames(prefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(prefixCls, "-vertical"), vertical), _defineProperty(_classNames, "".concat(prefixCls, "-horizontal"), !vertical), _defineProperty(_classNames, "".concat(prefixCls, "-with-marks"), markList.length), _classNames)),
+    className: cls(prefixCls, className, (_cls = {}, _defineProperty(_cls, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_cls, "".concat(prefixCls, "-vertical"), vertical), _defineProperty(_cls, "".concat(prefixCls, "-horizontal"), !vertical), _defineProperty(_cls, "".concat(prefixCls, "-with-marks"), markList.length), _cls)),
     style: style,
     onMouseDown: onSliderMouseDown
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-rail"),
-    style: railStyle
+    className: cls("".concat(prefixCls, "-rail"), classNames === null || classNames === void 0 ? void 0 : classNames.rail),
+    style: _objectSpread(_objectSpread({}, railStyle), styles === null || styles === void 0 ? void 0 : styles.rail)
   }), /*#__PURE__*/React.createElement(Tracks, {
@@ -374,0 +419,0 @@ prefixCls: prefixCls,

es/Steps/Dot.js

@@ -5,4 +5,4 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import classNames from 'classnames';
-import { getDirectionStyle } from '../util';
-import SliderContext from '../context';
+import { getDirectionStyle } from "../util";
+import SliderContext from "../context";
 export default function Dot(props) {
@@ -22,2 +22,3 @@ var prefixCls = props.prefixCls,
   var active = included && includedStart <= value && value <= includedEnd;
+
   // ============================ Offset ============================
@@ -24,0 +25,0 @@ var mergedStyle = _objectSpread(_objectSpread({}, getDirectionStyle(direction, value, min, max)), typeof style === 'function' ? style(value) : style);

es/Steps/index.js

 import * as React from 'react';
-import SliderContext from '../context';
-import Dot from './Dot';
+import SliderContext from "../context";
+import Dot from "./Dot";
 export default function Steps(props) {
@@ -16,2 +16,3 @@ var prefixCls = props.prefixCls,
     var dotSet = new Set();
+
     // Add marks
@@ -21,2 +22,3 @@ marks.forEach(function (mark) {
     });
+
     // Fill dots
@@ -23,0 +25,0 @@ if (dots && step !== null) {

es/Tracks/index.js

@@ -0,5 +1,7 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import cls from 'classnames';
 import * as React from 'react';
-import SliderContext from '../context';
-import Track from './Track';
-import { getIndex } from '../util';
+import SliderContext from "../context";
+import { getIndex } from "../util";
+import Track from "./Track";
 export default function Tracks(props) {
@@ -14,3 +16,7 @@ var prefixCls = props.prefixCls,
     range = _React$useContext.range,
-    min = _React$useContext.min;
+    min = _React$useContext.min,
+    styles = _React$useContext.styles,
+    classNames = _React$useContext.classNames;
+
+  // =========================== List ===========================
   var trackList = React.useMemo(function () {
@@ -29,2 +35,3 @@ if (!range) {
     }
+
     // Multiple
@@ -40,3 +47,16 @@ var list = [];
   }, [values, range, startPoint, min]);
-  return included ? trackList.map(function (_ref, index) {
+
+  // ========================== Render ==========================
+  var tracksNode = null;
+  if (classNames.tracks || styles.tracks) {
+    tracksNode = /*#__PURE__*/React.createElement(Track, {
+      index: null,
+      prefixCls: prefixCls,
+      start: trackList[0].start,
+      end: trackList[trackList.length - 1].end,
+      replaceCls: cls(classNames.tracks, "".concat(prefixCls, "-tracks")),
+      style: styles.tracks
+    });
+  }
+  return included ? /*#__PURE__*/React.createElement(React.Fragment, null, tracksNode, trackList.map(function (_ref, index) {
     var start = _ref.start,
@@ -47,3 +67,3 @@ end = _ref.end;
       prefixCls: prefixCls,
-      style: getIndex(style, index),
+      style: _objectSpread(_objectSpread({}, getIndex(style, index)), styles.track),
       start: start,
@@ -54,3 +74,3 @@ end: end,
     });
-  }) : null;
+  })) : null;
 }

es/Tracks/Track.d.ts

@@ -6,2 +6,4 @@ import * as React from 'react';
     style?: React.CSSProperties;
+    /** Replace with origin prefix concat className */
+    replaceCls?: string;
     start: number;
@@ -8,0 +10,0 @@ end: number;

es/Tracks/Track.js

 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import cls from 'classnames';
 import * as React from 'react';
-import classNames from 'classnames';
-import SliderContext from '../context';
-import { getOffset } from '../util';
+import SliderContext from "../context";
+import { getOffset } from "../util";
 export default function Track(props) {
-  var _classNames;
+  var _cls;
   var prefixCls = props.prefixCls,
@@ -14,3 +14,4 @@ style = props.style,
     index = props.index,
-    onStartMove = props.onStartMove;
+    onStartMove = props.onStartMove,
+    replaceCls = props.replaceCls;
   var _React$useContext = React.useContext(SliderContext),
@@ -21,6 +22,8 @@ direction = _React$useContext.direction,
     disabled = _React$useContext.disabled,
-    range = _React$useContext.range;
+    range = _React$useContext.range,
+    classNames = _React$useContext.classNames;
   var trackPrefixCls = "".concat(prefixCls, "-track");
   var offsetStart = getOffset(start, min, max);
   var offsetEnd = getOffset(end, min, max);
+
   // ============================ Events ============================
@@ -32,2 +35,3 @@ var onInternalStartMove = function onInternalStartMove(e) {
   };
+
   // ============================ Render ============================
@@ -52,4 +56,5 @@ var positionStyle = {};
   }
+  var className = replaceCls || cls(trackPrefixCls, (_cls = {}, _defineProperty(_cls, "".concat(trackPrefixCls, "-").concat(index + 1), index !== null && range), _defineProperty(_cls, "".concat(prefixCls, "-track-draggable"), onStartMove), _cls), classNames.track);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(trackPrefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(trackPrefixCls, "-").concat(index + 1), range), _defineProperty(_classNames, "".concat(prefixCls, "-track-draggable"), onStartMove), _classNames)),
+    className: className,
     style: _objectSpread(_objectSpread({}, positionStyle), style),
@@ -56,0 +61,0 @@ onMouseDown: onInternalStartMove,

es/util.js

@@ -27,2 +27,3 @@ export function getOffset(value, min, max) {
 }
+
 /** Return index value if is list or return value directly */
@@ -29,0 +30,0 @@ export function getIndex(value, index) {

lib/context.d.ts

 import * as React from 'react';
-import type { AriaValueFormat, Direction } from './interface';
+import type { AriaValueFormat, Direction, SliderClassNames, SliderStyles } from './interface';
 export interface SliderContextProps {
@@ -18,4 +18,6 @@ min: number;
     ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[];
+    classNames: SliderClassNames;
+    styles: SliderStyles;
 }
 declare const SliderContext: React.Context<SliderContextProps>;
 export default SliderContext;

lib/context.js

@@ -19,5 +19,7 @@ "use strict";
   tabIndex: 0,
-  keyboard: true
+  keyboard: true,
+  styles: {},
+  classNames: {}
 });
 var _default = SliderContext;
 exports.default = _default;

lib/Handles/Handle.js

@@ -13,5 +13,5 @@ "use strict";
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
+var React = _interopRequireWildcard(require("react"));
 var _context = _interopRequireDefault(require("../context"));
@@ -23,3 +23,3 @@ var _util = require("../util");
 var Handle = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _classNames, _getIndex;
+  var _cls, _getIndex;
   var prefixCls = props.prefixCls,
@@ -44,4 +44,7 @@ value = props.value,
     ariaLabelledByForHandle = _React$useContext.ariaLabelledByForHandle,
-    ariaValueTextFormatterForHandle = _React$useContext.ariaValueTextFormatterForHandle;
+    ariaValueTextFormatterForHandle = _React$useContext.ariaValueTextFormatterForHandle,
+    styles = _React$useContext.styles,
+    classNames = _React$useContext.classNames;
   var handlePrefixCls = "".concat(prefixCls, "-handle");
+
   // ============================ Events ============================
@@ -53,2 +56,3 @@ var onInternalStartMove = function onInternalStartMove(e) {
   };
+
   // =========================== Keyboard ===========================
@@ -58,2 +62,3 @@ var onKeyDown = function onKeyDown(e) {
       var offset = null;
+
       // Change the value
@@ -67,2 +72,3 @@ switch (e.which || e.keyCode) {
           break;
+
         // Up is plus
@@ -72,2 +78,3 @@ case _KeyCode.default.UP:
           break;
+
         // Down is minus
@@ -96,9 +103,11 @@ case _KeyCode.default.DOWN:
   };
+
   // ============================ Offset ============================
   var positionStyle = (0, _util.getDirectionStyle)(direction, value, min, max);
+
   // ============================ Render ============================
   var handleNode = /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     ref: ref,
-    className: (0, _classnames.default)(handlePrefixCls, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(handlePrefixCls, "-").concat(valueIndex + 1), range), (0, _defineProperty2.default)(_classNames, "".concat(handlePrefixCls, "-dragging"), dragging), _classNames)),
-    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, positionStyle), style),
+    className: (0, _classnames.default)(handlePrefixCls, (_cls = {}, (0, _defineProperty2.default)(_cls, "".concat(handlePrefixCls, "-").concat(valueIndex + 1), range), (0, _defineProperty2.default)(_cls, "".concat(handlePrefixCls, "-dragging"), dragging), _cls), classNames.handle),
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, positionStyle), style), styles.handle),
     onMouseDown: onInternalStartMove,
@@ -118,2 +127,3 @@ onTouchStart: onInternalStartMove,
   }, restProps));
+
   // Customize
@@ -120,0 +130,0 @@ if (render) {

lib/hooks/useDrag.js

@@ -45,2 +45,3 @@ "use strict";
   }, [rawValues, draggingIndex]);
+
   // Clean up event
@@ -69,2 +70,3 @@ React.useEffect(function () {
     // Basic point offset
+
     if (valueIndex === -1) {
@@ -76,2 +78,3 @@ // >>>> Dragging on the track
       var maxEndOffset = max - endValue;
+
       // Get valid offset
@@ -81,2 +84,3 @@ var offset = offsetPercent * (max - min);
       offset = Math.min(offset, maxEndOffset);
+
       // Use first value to revert back of valid offset (like steps marks)
@@ -92,2 +96,3 @@ var formatStartValue = formatValue(startValue + offset);
       var offsetDist = (max - min) * offsetPercent;
+
       // Always start with the valueIndex origin value
@@ -100,2 +105,3 @@ var cloneValues = (0, _toConsumableArray2.default)(cacheValues);
   };
+
   // Resolve closure
@@ -113,2 +119,3 @@ var updateCacheValueRef = React.useRef(updateCacheValue);
       startY = _getPosition.pageY;
+
     // Moving
@@ -141,2 +148,3 @@ var onMouseMove = function onMouseMove(event) {
     };
+
     // End
@@ -161,2 +169,3 @@ var onMouseUp = function onMouseUp(event) {
   };
+
   // Only return cache value when it mapping with rawValues
@@ -163,0 +172,0 @@ var returnValues = React.useMemo(function () {

lib/hooks/useOffset.js

@@ -13,2 +13,8 @@ "use strict";
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/** Format the value in the range of [min, max] */
+
+/** Format value align with step */
+
+/** Format value align with step & marks */
+
 function useOffset(min, max, step, markList, allowCross, pushable) {
@@ -24,2 +30,3 @@ var formatRangeValue = React.useCallback(function (val) {
       var stepValue = min + Math.round((formatRangeValue(val) - min) / step) * step;
+
       // Cut number in case to be like 0.30000000000000004
@@ -37,2 +44,3 @@ var getDecimal = function getDecimal(num) {
     var formatNextValue = formatRangeValue(val);
+
     // List align values
@@ -45,4 +53,6 @@ var alignValues = markList.map(function (mark) {
     }
+
     // min & max
     alignValues.push(min, max);
+
     // Align with marks
@@ -60,2 +70,3 @@ var closeValue = alignValues[0];
   }, [min, max, markList, step, formatRangeValue, formatStepValue]);
+
   // ========================== Offset ==========================
@@ -68,4 +79,6 @@ // Single Value
       var originValue = values[valueIndex];
+
       // Only used for `dist` mode
       var targetDistValue = originValue + offset;
+
       // Compare next step value & mark value which is best match
@@ -76,6 +89,9 @@ var potentialValues = [];
       });
+
       // 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
@@ -88,2 +104,3 @@ var sign = offset > 0 ? 1 : -1;
       }
+
       // Find close one
@@ -113,2 +130,3 @@ potentialValues = potentialValues.filter(function (val) {
       });
+
       // Out of range will back to range
@@ -118,2 +136,3 @@ if (nextValue === undefined) {
       }
+
       // `dist` mode
@@ -123,2 +142,3 @@ if (mode === 'dist') {
       }
+
       // `unit` mode may need another round
@@ -137,2 +157,3 @@ if (Math.abs(offset) > 1) {
   };
+
   /** Same as `offsetValue` but return `changed` mark to tell value changed */
@@ -151,2 +172,3 @@ var offsetChangedValue = function offsetChangedValue(values, offset, valueIndex) {
   };
+
   // Values
@@ -162,2 +184,3 @@ var offsetValues = function offsetValues(values, offset, valueIndex) {
       var pushNum = pushable || 0;
+
       // ============ AllowCross ===============
@@ -173,2 +196,3 @@ if (valueIndex > 0 && nextValues[valueIndex - 1] !== originValue) {
       // =============== Push ==================
+
       // >>>>>> Basic push
@@ -184,2 +208,3 @@ // End values
       }
+
       // Start values
@@ -194,2 +219,3 @@ for (var _i = valueIndex; _i > 0; _i -= 1) {
       }
+
       // >>>>> Revert back to safe push range
@@ -205,2 +231,3 @@ // End to Start
       }
+
       // Start to End
@@ -207,0 +234,0 @@ for (var _i3 = 0; _i3 < nextValues.length - 1; _i3 += 1) {

lib/interface.d.ts

@@ -5,1 +5,4 @@ import type React from 'react';
 export type AriaValueFormat = (value: number) => string;
+export type SemanticName = 'tracks' | 'track' | 'rail' | 'handle';
+export type SliderClassNames = Partial<Record<SemanticName, string>>;
+export type SliderStyles = Partial<Record<SemanticName, React.CSSProperties>>;

lib/Marks/index.js

@@ -18,2 +18,3 @@ "use strict";
   var markPrefixCls = "".concat(prefixCls, "-mark");
+
   // Not render mark if empty
@@ -20,0 +21,0 @@ if (!marks.length) {

lib/Marks/Mark.js

@@ -31,2 +31,3 @@ "use strict";
   var textCls = "".concat(prefixCls, "-text");
+
   // ============================ Offset ============================
@@ -33,0 +34,0 @@ var positionStyle = (0, _util.getDirectionStyle)(direction, value, min, max);

lib/Slider.d.ts

 import * as React from 'react';
 import type { HandlesProps } from './Handles';
-import type { AriaValueFormat } from './interface';
+import type { AriaValueFormat, SliderClassNames, SliderStyles } from './interface';
 import type { MarkObj } from './Marks';
@@ -22,2 +22,4 @@ /**
     style?: React.CSSProperties;
+    classNames?: SliderClassNames;
+    styles?: SliderStyles;
     disabled?: boolean;
@@ -48,4 +50,7 @@ keyboard?: boolean;
     startPoint?: number;
+    /** @deprecated Please use `styles.track` instead */
     trackStyle?: React.CSSProperties | React.CSSProperties[];
+    /** @deprecated Please use `styles.handle` instead */
     handleStyle?: React.CSSProperties | React.CSSProperties[];
+    /** @deprecated Please use `styles.rail` instead */
     railStyle?: React.CSSProperties;
@@ -52,0 +57,0 @@ dotStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);

lib/Slider.js

@@ -9,2 +9,3 @@ "use strict";
 exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -14,18 +15,32 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var React = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
 var _isEqual = _interopRequireDefault(require("rc-util/lib/isEqual"));
-var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
+var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
+var React = _interopRequireWildcard(require("react"));
+var _context = _interopRequireDefault(require("./context"));
 var _Handles = _interopRequireDefault(require("./Handles"));
 var _useDrag3 = _interopRequireDefault(require("./hooks/useDrag"));
-var _context = _interopRequireDefault(require("./context"));
-var _Tracks = _interopRequireDefault(require("./Tracks"));
+var _useOffset3 = _interopRequireDefault(require("./hooks/useOffset"));
 var _Marks = _interopRequireDefault(require("./Marks"));
 var _Steps = _interopRequireDefault(require("./Steps"));
-var _useOffset3 = _interopRequireDefault(require("./hooks/useOffset"));
-var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
+var _Tracks = _interopRequireDefault(require("./Tracks"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * New:
+ * - click mark to update range value
+ * - handleRender
+ * - Fix handle with count not correct
+ * - Fix pushable not work in some case
+ * - No more FindDOMNode
+ * - Move all position related style into inline style
+ * - Key: up is plus, down is minus
+ * - fix Key with step = null not align with marks
+ * - Change range should not trigger onChange
+ * - keyboard support pushable
+ */
+
 var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _classNames;
+  var _cls;
   var _props$prefixCls = props.prefixCls,
@@ -35,2 +50,4 @@ prefixCls = _props$prefixCls === void 0 ? 'rc-slider' : _props$prefixCls,
     style = props.style,
+    classNames = props.classNames,
+    styles = props.styles,
     _props$disabled = props.disabled,
@@ -87,2 +104,3 @@ disabled = _props$disabled === void 0 ? false : _props$disabled,
   }, [reverse, vertical]);
+
   // ============================ Range =============================
@@ -95,2 +113,3 @@ var mergedMin = React.useMemo(function () {
   }, [max]);
+
   // ============================= Step =============================
@@ -100,2 +119,3 @@ var mergedStep = React.useMemo(function () {
   }, [step]);
+
   // ============================= Push =============================
@@ -108,2 +128,3 @@ var mergedPush = React.useMemo(function () {
   }, [pushable, mergedStep]);
+
   // ============================ Marks =============================
@@ -131,2 +152,3 @@ var markList = React.useMemo(function () {
   }, [marks]);
+
   // ============================ Format ============================
@@ -137,2 +159,3 @@ var _useOffset = (0, _useOffset3.default)(mergedMin, mergedMax, mergedStep, markList, allowCross, mergedPush),
     offsetValues = _useOffset2[1];
+
   // ============================ Values ============================
@@ -151,5 +174,7 @@ var _useMergedState = (0, _useMergedState3.default)(defaultValue, {
     var returnValues = mergedValue === null ? [] : [val0];
+
     // Format as range
     if (range) {
       returnValues = (0, _toConsumableArray2.default)(valueList);
+
       // When count provided or value is `undefined`, we fill values
@@ -159,2 +184,3 @@ if (count || mergedValue === undefined) {
         returnValues = returnValues.slice(0, pointCount);
+
         // Fill with count
@@ -170,2 +196,3 @@ while (returnValues.length < pointCount) {
     }
+
     // Align in range
@@ -177,2 +204,3 @@ returnValues.forEach(function (val, index) {
   }, [mergedValue, range, mergedMin, count, formatValue]);
+
   // =========================== onChange ===========================
@@ -189,2 +217,3 @@ var rawValuesRef = React.useRef(rawValues);
     });
+
     // Trigger event if needed
@@ -194,2 +223,3 @@ if (onChange && !(0, _isEqual.default)(cloneNextValues, rawValuesRef.current, true)) {
     }
+
     // We set this later since it will re-render component immediately
@@ -209,5 +239,7 @@ setValue(cloneNextValues);
       });
+
       // Create new values
       var cloneNextValues = (0, _toConsumableArray2.default)(rawValues);
       cloneNextValues[valueIndex] = newValue;
+
       // Fill value to match default 2
@@ -222,2 +254,3 @@ if (range && !rawValues.length && count === undefined) {
   };
+
   // ============================ Click =============================
@@ -252,2 +285,3 @@ var onSliderMouseDown = function onSliderMouseDown(e) {
   };
+
   // =========================== Keyboard ===========================
@@ -276,2 +310,3 @@ var _React$useState = React.useState(null),
   }, [keyboardValue]);
+
   // ============================= Drag =============================
@@ -300,2 +335,3 @@ var mergedDraggableTrack = React.useMemo(function () {
   };
+
   // Auto focus for updated handle
@@ -309,2 +345,3 @@ var dragging = draggingIndex !== -1;
   }, [dragging]);
+
   // =========================== Included ===========================
@@ -316,2 +353,3 @@ var sortedCacheValues = React.useMemo(function () {
   }, [cacheValues]);
+
   // Provide a range values with included [min, max]
@@ -328,2 +366,3 @@ // Used for Track, Mark & Dot
     includedEnd = _React$useMemo2[1];
+
   // ============================= Refs =============================
@@ -344,2 +383,3 @@ React.useImperativeHandle(ref, function () {
   });
+
   // ========================== Auto Focus ==========================
@@ -351,2 +391,3 @@ React.useEffect(function () {
   }, []);
+
   // =========================== Context ============================
@@ -368,5 +409,8 @@ var context = React.useMemo(function () {
       ariaLabelledByForHandle: ariaLabelledByForHandle,
-      ariaValueTextFormatterForHandle: ariaValueTextFormatterForHandle
+      ariaValueTextFormatterForHandle: ariaValueTextFormatterForHandle,
+      styles: styles || {},
+      classNames: classNames || {}
     };
-  }, [mergedMin, mergedMax, direction, disabled, keyboard, mergedStep, included, includedStart, includedEnd, range, tabIndex, ariaLabelForHandle, ariaLabelledByForHandle, ariaValueTextFormatterForHandle]);
+  }, [mergedMin, mergedMax, direction, disabled, keyboard, mergedStep, included, includedStart, includedEnd, range, tabIndex, ariaLabelForHandle, ariaLabelledByForHandle, ariaValueTextFormatterForHandle, styles, classNames]);
+
   // ============================ Render ============================
@@ -377,8 +421,8 @@ return /*#__PURE__*/React.createElement(_context.default.Provider, {
     ref: containerRef,
-    className: (0, _classnames.default)(prefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-vertical"), vertical), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-horizontal"), !vertical), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-with-marks"), markList.length), _classNames)),
+    className: (0, _classnames.default)(prefixCls, className, (_cls = {}, (0, _defineProperty2.default)(_cls, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_cls, "".concat(prefixCls, "-vertical"), vertical), (0, _defineProperty2.default)(_cls, "".concat(prefixCls, "-horizontal"), !vertical), (0, _defineProperty2.default)(_cls, "".concat(prefixCls, "-with-marks"), markList.length), _cls)),
     style: style,
     onMouseDown: onSliderMouseDown
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-rail"),
-    style: railStyle
+    className: (0, _classnames.default)("".concat(prefixCls, "-rail"), classNames === null || classNames === void 0 ? void 0 : classNames.rail),
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, railStyle), styles === null || styles === void 0 ? void 0 : styles.rail)
   }), /*#__PURE__*/React.createElement(_Tracks.default, {
@@ -385,0 +429,0 @@ prefixCls: prefixCls,

lib/Steps/Dot.js

@@ -31,2 +31,3 @@ "use strict";
   var active = included && includedStart <= value && value <= includedEnd;
+
   // ============================ Offset ============================
@@ -33,0 +34,0 @@ var mergedStyle = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _util.getDirectionStyle)(direction, value, min, max)), typeof style === 'function' ? style(value) : style);

lib/Steps/index.js

@@ -26,2 +26,3 @@ "use strict";
     var dotSet = new Set();
+
     // Add marks
@@ -31,2 +32,3 @@ marks.forEach(function (mark) {
     });
+
     // Fill dots
@@ -33,0 +35,0 @@ if (dots && step !== null) {

lib/Tracks/index.js

@@ -9,6 +9,8 @@ "use strict";
 exports.default = Tracks;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var React = _interopRequireWildcard(require("react"));
 var _context = _interopRequireDefault(require("../context"));
+var _util = require("../util");
 var _Track = _interopRequireDefault(require("./Track"));
-var _util = require("../util");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -25,3 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
     range = _React$useContext.range,
-    min = _React$useContext.min;
+    min = _React$useContext.min,
+    styles = _React$useContext.styles,
+    classNames = _React$useContext.classNames;
+
+  // =========================== List ===========================
   var trackList = React.useMemo(function () {
@@ -40,2 +46,3 @@ if (!range) {
     }
+
     // Multiple
@@ -51,3 +58,16 @@ var list = [];
   }, [values, range, startPoint, min]);
-  return included ? trackList.map(function (_ref, index) {
+
+  // ========================== Render ==========================
+  var tracksNode = null;
+  if (classNames.tracks || styles.tracks) {
+    tracksNode = /*#__PURE__*/React.createElement(_Track.default, {
+      index: null,
+      prefixCls: prefixCls,
+      start: trackList[0].start,
+      end: trackList[trackList.length - 1].end,
+      replaceCls: (0, _classnames.default)(classNames.tracks, "".concat(prefixCls, "-tracks")),
+      style: styles.tracks
+    });
+  }
+  return included ? /*#__PURE__*/React.createElement(React.Fragment, null, tracksNode, trackList.map(function (_ref, index) {
     var start = _ref.start,
@@ -58,3 +78,3 @@ end = _ref.end;
       prefixCls: prefixCls,
-      style: (0, _util.getIndex)(style, index),
+      style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _util.getIndex)(style, index)), styles.track),
       start: start,
@@ -65,3 +85,3 @@ end: end,
     });
-  }) : null;
+  })) : null;
 }

lib/Tracks/Track.d.ts

@@ -6,2 +6,4 @@ import * as React from 'react';
     style?: React.CSSProperties;
+    /** Replace with origin prefix concat className */
+    replaceCls?: string;
     start: number;
@@ -8,0 +10,0 @@ end: number;

lib/Tracks/Track.js

@@ -11,4 +11,4 @@ "use strict";
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var React = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
 var _context = _interopRequireDefault(require("../context"));
@@ -19,3 +19,3 @@ var _util = require("../util");
 function Track(props) {
-  var _classNames;
+  var _cls;
   var prefixCls = props.prefixCls,
@@ -26,3 +26,4 @@ style = props.style,
     index = props.index,
-    onStartMove = props.onStartMove;
+    onStartMove = props.onStartMove,
+    replaceCls = props.replaceCls;
   var _React$useContext = React.useContext(_context.default),
@@ -33,6 +34,8 @@ direction = _React$useContext.direction,
     disabled = _React$useContext.disabled,
-    range = _React$useContext.range;
+    range = _React$useContext.range,
+    classNames = _React$useContext.classNames;
   var trackPrefixCls = "".concat(prefixCls, "-track");
   var offsetStart = (0, _util.getOffset)(start, min, max);
   var offsetEnd = (0, _util.getOffset)(end, min, max);
+
   // ============================ Events ============================
@@ -44,2 +47,3 @@ var onInternalStartMove = function onInternalStartMove(e) {
   };
+
   // ============================ Render ============================
@@ -64,4 +68,5 @@ var positionStyle = {};
   }
+  var className = replaceCls || (0, _classnames.default)(trackPrefixCls, (_cls = {}, (0, _defineProperty2.default)(_cls, "".concat(trackPrefixCls, "-").concat(index + 1), index !== null && range), (0, _defineProperty2.default)(_cls, "".concat(prefixCls, "-track-draggable"), onStartMove), _cls), classNames.track);
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames.default)(trackPrefixCls, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(trackPrefixCls, "-").concat(index + 1), range), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-track-draggable"), onStartMove), _classNames)),
+    className: className,
     style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, positionStyle), style),
@@ -68,0 +73,0 @@ onMouseDown: onInternalStartMove,

lib/util.js

@@ -35,2 +35,3 @@ "use strict";
 }
+
 /** Return index value if is list or return value directly */
@@ -37,0 +38,0 @@ function getIndex(value, index) {

package.json

 {
   "name": "rc-slider",
-  "version": "10.2.1",
+  "version": "10.3.0",
   "description": "Slider UI component for React",
@@ -43,4 +43,4 @@ "engines": {
     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
-    "test": "father test",
-    "coverage": "father test --coverage",
+    "test": "rc-test",
+    "coverage": "rc-test --coverage",
     "now-build": "npm run docs:build"
@@ -58,2 +58,3 @@ },
   "devDependencies": {
+    "@rc-component/father-plugin": "^1.0.2",
     "@testing-library/jest-dom": "^5.16.2",
@@ -67,8 +68,5 @@ "@testing-library/react": "^12.1.3",
     "cross-env": "^7.0.0",
-    "dumi": "^1.1.7",
-    "enzyme": "^3.1.0",
-    "enzyme-adapter-react-16": "^1.0.1",
-    "enzyme-to-json": "^3.1.2",
+    "dumi": "^2.2.10",
     "eslint": "^7.1.0",
-    "father": "^2.22.0",
+    "father": "^4.3.5",
     "father-build": "^1.18.6",
@@ -79,2 +77,3 @@ "gh-pages": "^3.1.0",
     "np": "^7.0.0",
+    "rc-test": "^7.0.15",
     "rc-tooltip": "^5.0.1",
@@ -81,0 +80,0 @@ "rc-trigger": "^5.0.4",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1419087

865.1%

Dev dependency count

24

-4%

Number of package files

110

71.88%

Lines of code

9293

191.5%

Worsened metrics

Number of medium supply chain risk alerts

2

Infinity%

No dependency changes