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.
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: 0°C,
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({