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