perf: add marks dot classname

src/Steps/Dot.tsx

@@ -5,13 +5,14 @@ import SliderContext from '../context';
 
 export interface DotProps {
   prefixCls: string;
+  className?: string;
   value: number;
   style?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
   activeStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
 }
 
 export default function Dot(props: DotProps) {
-  const { prefixCls, value, style, activeStyle } = props;
+  const { prefixCls, className, value, style, activeStyle } = props;
   const { min, max, direction, included, includedStart, includedEnd } =
     React.useContext(SliderContext);
 
@@ -35,7 +36,7 @@ export default function Dot(props: DotProps) {
     <span
       className={classNames(dotClassName, {
         [`${dotClassName}-active`]: active,
-      })}
+      }, className)}
       style={mergedStyle}
     />
   );

src/Steps/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import type { InternalMarkObj } from '../Marks';
 import SliderContext from '../context';
 import Dot from './Dot';
+import classNames from 'classnames';
 
 export interface StepsProps {
   prefixCls: string;
@@ -15,14 +16,17 @@ export default function Steps(props: StepsProps) {
   const { prefixCls, marks, dots, style, activeStyle } = props;
   const { min, max, step } = React.useContext(SliderContext);
 
-  const stepDots = React.useMemo(() => {
+  const { stepDots, marksValue } = React.useMemo(() => {
     const dotSet = new Set<number>();
 
     // Add marks
     marks.forEach((mark) => {
       dotSet.add(mark.value);
     });
 
+    // Set marksValue
+    const uniqueMarksValue = Array.from(dotSet);
+
     // Fill dots
     if (dots && step !== null) {
       let current = min;
@@ -32,20 +36,31 @@ export default function Steps(props: StepsProps) {
       }
     }
 
-    return Array.from(dotSet);
+    return {
+      marksValue: uniqueMarksValue,
+      stepDots: Array.from(dotSet),
+    };
   }, [min, max, step, dots, marks]);
 
   return (
     <div className={`${prefixCls}-step`}>
-      {stepDots.map((dotValue) => (
-        <Dot
-          prefixCls={prefixCls}
-          key={dotValue}
-          value={dotValue}
-          style={style}
-          activeStyle={activeStyle}
-        />
-      ))}
+      {stepDots.map((dotValue) => {
+        // Check whether it is a marks dot
+        const isMarksDot = marksValue.indexOf(dotValue) >= 0;
+
+        return (
+          <Dot
+            prefixCls={prefixCls}
+            className={classNames({
+              [`${prefixCls}-marks-dot`]: isMarksDot,
+            })}
+            key={dotValue}
+            value={dotValue}
+            style={style}
+            activeStyle={activeStyle}
+          />
+        );
+      })}
     </div>
   );
 }

tests/marks.test.js

@@ -19,12 +19,14 @@ describe('marks', () => {
     const marks = { 0: 0, 30: '30', 99: '', 100: '100' };
 
     const { container } = render(<Slider value={30} marks={marks} />);
+    expect(container.getElementsByClassName('rc-slider-marks-dot')).toHaveLength(3);
     expect(container.getElementsByClassName('rc-slider-mark-text')).toHaveLength(3);
     expect(container.getElementsByClassName('rc-slider-mark-text')[0].innerHTML).toBe('0');
     expect(container.getElementsByClassName('rc-slider-mark-text')[1].innerHTML).toBe('30');
     expect(container.getElementsByClassName('rc-slider-mark-text')[2].innerHTML).toBe('100');
 
     const { container: container2 } = render(<Slider range value={[0, 30]} marks={marks} />);
+    expect(container2.getElementsByClassName('rc-slider-marks-dot')).toHaveLength(3);
     expect(container2.getElementsByClassName('rc-slider-mark-text')).toHaveLength(3);
     expect(container2.getElementsByClassName('rc-slider-mark-text')[0].innerHTML).toBe('0');
     expect(container2.getElementsByClassName('rc-slider-mark-text')[1].innerHTML).toBe('30');