diff --git a/README.md b/README.md
index 6c4941e..d1bc197 100644
--- a/README.md
+++ b/README.md
@@ -90,9 +90,9 @@ ReactDOM.render(, container);
| marks |
- object {number: string} |
+ object{number: string} or object{number: object{ style, label }} |
{} |
- Mark on the slider. The key determines the position, and the value determines what will show. |
+ Mark 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. |
| step |
diff --git a/examples/marks.js b/examples/marks.js
index 0798444..4413dc5 100644
--- a/examples/marks.js
+++ b/examples/marks.js
@@ -11,7 +11,12 @@ const marks = {
26: '26°C',
37: '37°C',
50: '50°C',
- 100: '100°C',
+ 100: {
+ style: {
+ color: 'red',
+ },
+ label: '100°C',
+ },
};
function log(value) {
diff --git a/src/Marks.jsx b/src/Marks.jsx
index 64de7f5..0786b08 100644
--- a/src/Marks.jsx
+++ b/src/Marks.jsx
@@ -19,8 +19,13 @@ const Marks = ({className, marks, included, upperBound, lowerBound, max, min}) =
const style = { width: markWidth + '%' };
style.left = (point - min) / range * 100 - markWidth / 2 + '%';
- return (
- {marks[point]}
+ const markPoint = marks[point];
+ const markPointIsObject = typeof markPoint === 'object';
+ const markLabel = markPointIsObject ? markPoint.label : markPoint;
+ const markStyle = markPointIsObject ?
+ { ...style, ...markPoint.style } : style;
+ return (
+ {markLabel}
);
});