diff --git a/README.md b/README.md index 67f6ca1..58023d1 100644 --- a/README.md +++ b/README.md @@ -88,11 +88,17 @@ ReactDOM.render(, container); 100 The maximum value of the slider + + marks + object {number: string} + {} + Mark on the slider. The key determines the position, and the value determines what will show. + step - number + number or `null` 1 - Value to be added or subtracted on each step the slider makes. Must be greater than zero. max - min should be evenly divisible by the step value. + Value to be added or subtracted on each step the slider makes. Must be greater than zero. 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. range @@ -112,35 +118,17 @@ ReactDOM.render(, container); Set current positions of handles. If range is `false`, the type of `defaultValue` should be `number`. Otherwise, `[number, number]` - - marks - array - [] - Mark every step for the slider, it will ignore the `step` parameter if it has been defined. Does not work with `range` - included boolean true If the value is `true`, it means a continuous value interval, otherwise, it is a independent value. - - defaultIndex - number - 0 - For step or marks slider, determines the initial position of the handle. Does not work with `range` - - - index - number - - For step or marks slider, determines current position of the handle. Does not work with `range` - disabled boolean false - If true the handles can't be moved. + If `true`, handles can't be moved. tipTransitionName @@ -150,7 +138,7 @@ ReactDOM.render(, container); tipFormatter - func + function Format the value of the tooltip if it shows. @@ -158,7 +146,7 @@ ReactDOM.render(, container); dots bool false - For linear slider, when the `step` value is greater than 1, you can set the `dots` to `true` if you want to render the slider bar with dots. + When the `step` value is greater than 1, you can set the `dots` to `true` if you want to render the slider with dots. diff --git a/examples/marks.js b/examples/marks.js index eef1fc2..bd92b4f 100644 --- a/examples/marks.js +++ b/examples/marks.js @@ -22,11 +22,11 @@ var log = function(value) { ReactDOM.render(
-

Slider with marks, `included=true`

- +

Slider with marks, `step=null`

+
-

Slider with marks and steps, `included=true`

+

Slider with marks and steps

diff --git a/package.json b/package.json index deab63d..d4c8239 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-slider", - "version": "3.0.1", + "version": "3.1.0", "description": "slider ui component for react", "keywords": [ "react", diff --git a/src/Slider.jsx b/src/Slider.jsx index 5cecc7c..8923de3 100644 --- a/src/Slider.jsx +++ b/src/Slider.jsx @@ -25,10 +25,6 @@ function pauseEvent(e) { e.preventDefault(); } -function isEmpty(collection) { - return Object.keys(collection).length === 0; -} - class Slider extends React.Component { constructor(props) { super(props); @@ -194,7 +190,7 @@ class Slider extends React.Component { getPoints() { const {marks, step, min, max} = this.props; const points = Object.keys(marks); - if (isEmpty(marks) || step > 1) { + if (step !== null) { for (let i = min; i <= max; i = i + step) { points.push(i); } @@ -291,9 +287,8 @@ class Slider extends React.Component { render() { const {handle, upperBound, lowerBound} = this.state; - const {className, prefixCls, disabled, dots, included, range, + const {className, prefixCls, disabled, dots, included, range, step, marks, max, min, tipTransitionName, tipFormatter, children} = this.props; - const marksCount = Object.keys(marks).length; const sliderClassName = classSet({ [prefixCls]: true, @@ -311,7 +306,7 @@ class Slider extends React.Component { } const handleClassName = prefixCls + '-handle'; - const isNoTip = (marksCount > 0) && !tipFormatter; + const isNoTip = (step === null) && !tipFormatter; const upper = ();