From 8b9f03bfdb270cc8f26a67370445a32ef17b988e Mon Sep 17 00:00:00 2001
From: Ronald Ruzicka <ruzicka.ronald@gmail.com>
Date: Fri, 23 Jul 2021 15:09:55 +0200
Subject: [PATCH] feat: set exact step value on click

---
 src/common/Steps.tsx        | 17 +++++++++++++----
 src/common/createSlider.tsx |  1 +
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/common/Steps.tsx b/src/common/Steps.tsx
index cf8238707..477a87a50 100644
--- a/src/common/Steps.tsx
+++ b/src/common/Steps.tsx
@@ -41,28 +41,37 @@ const Steps = ({
   min,
   dotStyle,
   activeDotStyle,
+  onClick,
 }) => {
   const range = max - min;
   const elements = calcPoints(vertical, marks, dots, step, min, max).map(point => {
     const offset = `${(Math.abs(point - min) / range) * 100}%`;
 
-    const isActived =
+    const isActive =
       (!included && point === upperBound) ||
       (included && point <= upperBound && point >= lowerBound);
     let style = vertical
       ? { ...dotStyle, [reverse ? 'top' : 'bottom']: offset }
       : { ...dotStyle, [reverse ? 'right' : 'left']: offset };
-    if (isActived) {
+    if (isActive) {
       style = { ...style, ...activeDotStyle };
     }
 
     const pointClassName = classNames({
       [`${prefixCls}-dot`]: true,
-      [`${prefixCls}-dot-active`]: isActived,
+      [`${prefixCls}-dot-active`]: isActive,
       [`${prefixCls}-dot-reverse`]: reverse,
     });
 
-    return <span className={pointClassName} style={style} key={point} />;
+    return (
+      <span
+        className={pointClassName}
+        style={style}
+        key={point}
+        onMouseDown={e => onClick(e, point)}
+        onTouchStart={e => onClick(e, point)}
+      />
+    );
   });
 
   return <div className={`${prefixCls}-step`}>{elements}</div>;
diff --git a/src/common/createSlider.tsx b/src/common/createSlider.tsx
index a90dfe768..7dfb499b7 100644
--- a/src/common/createSlider.tsx
+++ b/src/common/createSlider.tsx
@@ -366,6 +366,7 @@ export default function createSlider<
             min={min}
             dotStyle={dotStyle}
             activeDotStyle={activeDotStyle}
+            onClick={disabled ? noop : this.onClickMarkLabel}
           />
           {handles}
           <Marks