From 99324fdc436107fa5c4bff8b18710ade901445d9 Mon Sep 17 00:00:00 2001
From: Islam Sharabash <islam.sharabash@gmail.com>
Date: Wed, 2 May 2018 22:39:24 -0700
Subject: [PATCH] Set dotStyle and activeDotStyle per mark

---
 README.md            |  2 +-
 examples/marks.js    | 10 +++++++++-
 src/common/Steps.jsx | 10 ++++++++++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 300d7bf3d..78a34fc32 100644
--- a/README.md
+++ b/README.md
@@ -96,7 +96,7 @@ The following APIs are shared by Slider and Range.
 | className | string | `''` | Additional CSS class for the root DOM node |
 | min | number | `0` | The minimum value of the slider |
 | max | number | `100` | The maximum value of the slider |
-| marks | `{number: string}` or`{number: { style, label }}` | `{}` | Marks on the slider. The key determines the position, and the value determines what will show. If you want to set the style of a specific mark point, the value should be an object which contains `style` and `label` properties. |
+| marks | `{number: string}` or`{number: { style, dotStyle, activeDotStyle, label }}` | `{}` | Marks on the slider. The key determines the position, and the value determines what will show. If you want to set the style of a specific mark point, the value should be an object which contains `style` and `label` properties. You can also set `dotStyle` and `activeDotStyle` properties to style the dot. |
 | step | number or `null` | `1` | Value to be added or subtracted on each step the slider makes. Must be greater than zero, and `max` - `min` should be evenly divisible by the step value. <br /> When `marks` is not an empty object, `step` can be set to `null`, to make `marks` as steps. |
 | vertical | boolean | `false` | If vertical is `true`, the slider will be vertical. |
 | handle | (props) => React.ReactNode | | A handle generator which could be used to customized handle. |
diff --git a/examples/marks.js b/examples/marks.js
index 68ba753b1..a77b1810f 100644
--- a/examples/marks.js
+++ b/examples/marks.js
@@ -10,7 +10,15 @@ const marks = {
   0: <strong>0°C</strong>,
   26: '26°C',
   37: '37°C',
-  50: '50°C',
+  50: {
+    dotStyle: {
+      backgroundColor: 'orange',
+    },
+    activeDotStyle: {
+      backgroundColor: 'blue',
+    },
+    label: '50°C',
+  },
   100: {
     style: {
       color: 'red',
diff --git a/src/common/Steps.jsx b/src/common/Steps.jsx
index ed33bf805..be824ae3e 100644
--- a/src/common/Steps.jsx
+++ b/src/common/Steps.jsx
@@ -22,12 +22,22 @@ const Steps = ({ prefixCls, vertical, marks, dots, step, included,
   const range = max - min;
   const elements = calcPoints(vertical, marks, dots, step, min, max).map((point) => {
     const offset = `${Math.abs(point - min) / range * 100}%`;
+    const mark = marks[point];
 
     const isActived = (!included && point === upperBound) ||
             (included && point <= upperBound && point >= lowerBound);
     let style = vertical ? { bottom: offset, ...dotStyle } : { left: offset, ...dotStyle };
+
+    if (mark && mark.dotStyle) {
+      style = { ...style, ...mark.dotStyle };
+    }
+
     if (isActived) {
       style = { ...style, ...activeDotStyle };
+
+      if (mark && mark.activeDotStyle) {
+        style = { ...style, ...mark.activeDotStyle };
+      }
     }
 
     const pointClassName = classNames({