Set dotStyle and activeDotStyle per mark

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. |

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',

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({