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} ); });