diff --git a/src/Steps/Dot.tsx b/src/Steps/Dot.tsx
index a8eaa4bef..e3c1288ac 100644
--- a/src/Steps/Dot.tsx
+++ b/src/Steps/Dot.tsx
@@ -6,17 +6,20 @@ 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 marksDotClassName = `${prefixCls}-marks-dot`;
const active = included && includedStart <= value && value <= includedEnd;
+ const marksDot = marksValue.includes(value);
// ============================ Offset ============================
let mergedStyle = {
@@ -33,9 +36,15 @@ export default function Dot(props: DotProps) {
return (
);
diff --git a/src/Steps/index.tsx b/src/Steps/index.tsx
index e3c235f85..b33a9d140 100644
--- a/src/Steps/index.tsx
+++ b/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([]);
+
const stepDots = React.useMemo(() => {
const dotSet = new Set();
@@ -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) => (