Merge pull request #43 from react-component/fix-marks

fix: the key of marks could be negative

examples/marks.js

@@ -8,6 +8,7 @@ var Slider = require('rc-slider');
 
 var style = {width: 400, margin: 50};
 var marks = {
+  '-10': '-10°C',
   0: '0°C',
   26: '26°C',
   37: '37°C',
@@ -22,29 +23,29 @@ ReactDOM.render(
   <div>
     <div style={style}>
       <p>Slider with marks, `included=true`</p>
-      <Slider marks={marks} onChange={log} defaultValue={20} />
+      <Slider min={-10} marks={marks} onChange={log} defaultValue={20} />
     </div>
     <div style={style}>
       <p>Slider with marks and steps, `included=true`</p>
-      <Slider marks={marks} step={10} onChange={log} defaultValue={20} />
+      <Slider min={-10} marks={marks} step={10} onChange={log} defaultValue={20} />
     </div>
 
     <div style={style}>
       <p>Slider with marks, `included=false`</p>
-      <Slider marks={marks} included={false} defaultValue={20} />
+      <Slider min={-10} marks={marks} included={false} defaultValue={20} />
     </div>
     <div style={style}>
       <p>Slider with marks and steps, `included=false`</p>
-      <Slider marks={marks} step={10} included={false} defaultValue={20} />
+      <Slider min={-10} marks={marks} step={10} included={false} defaultValue={20} />
     </div>
 
     <div style={style}>
       <p>Range with marks</p>
-    <Slider range marks={marks} onChange={log} defaultValue={[20, 40]} />
+      <Slider min={-10} range marks={marks} onChange={log} defaultValue={[20, 40]} />
     </div>
     <div style={style}>
       <p>Range with marks and steps</p>
-      <Slider range marks={marks} step={10} onChange={log} defaultValue={[20, 40]} />
+      <Slider min={-10} range marks={marks} step={10} onChange={log} defaultValue={[20, 40]} />
     </div>
   </div>
   , document.getElementById('__react-content'));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-slider",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "slider ui component for react",
   "keywords": [
     "react",

src/Marks.jsx

@@ -17,13 +17,7 @@ const Marks = ({className, marks, included, upperBound, lowerBound, max, min}) =
     });
 
     const style = { width: markWidth };
-    if (point === marksCount - 1) {
+    style.left = (point - min) / range * 100 - unit / 4 + '%';
-      style.right = -unit / 4 + '%';
-    } else if (point === 0) {
-      style.left = -unit / 4 + '%';
-    } else {
-      style.left = (point - min) / range * 100 - unit / 4 + '%';
-    }
 
     return (<span className={markClassName} style={style} key={point}>
              {marks[point]}