perf: add marks dot classname

src/Steps/Dot.tsx

@@ -6,18 +6,23 @@ import SliderContext from '../context';
 export interface DotProps {
   prefixCls: string;
   value: number;
+  marksValue: 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, marksValue, value, style, activeStyle } = props;
   const { min, max, direction, included, includedStart, includedEnd } =
     React.useContext(SliderContext);
 
   const dotClassName = `${prefixCls}-dot`;
   const active = included && includedStart <= value && value <= includedEnd;
 
+  // It defines the className for the marks dots.
+  const marksDotClassName = `${prefixCls}-marks-dot`;
+  const marksDot = marksValue.indexOf(value) >= 0;
+
   // ============================ Offset ============================
   let mergedStyle = {
     ...getDirectionStyle(direction, value, min, max),
@@ -35,6 +40,7 @@ export default function Dot(props: DotProps) {
     <span
       className={classNames(dotClassName, {
         [`${dotClassName}-active`]: active,
+        [marksDotClassName]: marksDot,
       })}
       style={mergedStyle}
     />

src/Steps/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { InternalMarkObj } from '../Marks';
+import type { DotProps } from './Dot';
 import SliderContext from '../context';
 import Dot from './Dot';
 
@@ -15,6 +16,8 @@ export default function Steps(props: StepsProps) {
   const { prefixCls, marks, dots, style, activeStyle } = props;
   const { min, max, step } = React.useContext(SliderContext);
 
+  const marksValueRef = React.useRef<DotProps['marksValue']>([]);
+
   const stepDots = React.useMemo(() => {
     const dotSet = new Set<number>();
 
@@ -23,6 +26,9 @@ export default function Steps(props: StepsProps) {
       dotSet.add(mark.value);
     });
 
+    //Fill marksValue
+    marksValueRef.current = Array.from(dotSet);
+
     // Fill dots
     if (dots && step !== null) {
       let current = min;
@@ -40,6 +46,7 @@ export default function Steps(props: StepsProps) {
       {stepDots.map((dotValue) => (
         <Dot
           prefixCls={prefixCls}
+          marksValue={marksValueRef.current}
           key={dotValue}
           value={dotValue}
           style={style}

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');