fix: some diffs

- update to 3.6.0 (refs:https://github.com/react-component/slider/pull/85#discussion-diff-58325891)
- change `.rc-slider-vertical` to `.{prefixClass}-vertical` (refs:https://github.com/react-component/slider/pull/85#discussion-diff-58325944)
- put all the slider & Range in one row (refs:https://github.com/react-component/slider/pull/85#discussion-diff-58326190)

HISTORY.md

@@ -1,7 +1,7 @@
 # History
 ----
 
-## 3.5.2 / 2016-04-01
+## 3.6.0 / 2016-04-01
 
 [#18](https://github.com/react-component/slider/issues/18) add `vertical` props ([@wnlee](https://github.com/WNLee))
 

assets/index.less

@@ -133,7 +133,7 @@
   }
 }
 
-.rc-slider-vertical {
+.@{prefixClass}-vertical {
   width: 4px;
   height: 100%;
   .@{prefixClass} {

examples/v-marks.js

@@ -4,7 +4,9 @@ const React = require('react');
 const ReactDOM = require('react-dom');
 const Slider = require('rc-slider');
 
-const style = {height: 400, marginBottom: 50, marginLeft: 50};
+const style = {float: 'left', 'marginBottom': 20, width: 160, height: 400, marginBottom: 160, marginLeft: 50};
+const parentStyle = {overflow: 'hidden'};
+
 const marks = {
   '-10': '-10°C',
   0: <strong>0°C</strong>,
@@ -24,29 +26,29 @@ function log(value) {
 }
 
 ReactDOM.render(
-  <div>
-    <p>Slider with marks, `step=null`</p>
+  <div style={parentStyle}>
     <div style={style}>
+      <p>Slider with marks, `step=null`</p>
       <Slider vertical min={-10} marks={marks} step={null} onChange={log} defaultValue={20} />
     </div>
-    <p>Slider with marks and steps</p>
     <div style={style}>
+       <p>Slider with marks and steps</p>
       <Slider vertical dots min={-10} marks={marks} step={10} onChange={log} defaultValue={20} />
     </div>
-    <p>Slider with marks, `included=false`</p>
     <div style={style}>
+      <p>Slider with marks, `included=false`</p>
       <Slider vertical min={-10} marks={marks} included={false} defaultValue={20} />
     </div>
-    <p>Slider with marks and steps, `included=false`</p>
     <div style={style}>
+      <p>Slider with marks and steps, `included=false`</p>
       <Slider vertical min={-10} marks={marks} step={10} included={false} defaultValue={20} />
     </div>
-    <p>Range with marks</p>
     <div style={style}>
+      <p>Range with marks</p>
       <Slider vertical min={-10} range marks={marks} onChange={log} defaultValue={[20, 40]} />
     </div>
-    <p>Range with marks and steps</p>
     <div style={style}>
+      <p>Range with marks and steps</p>
       <Slider vertical min={-10} range marks={marks} step={10} onChange={log} defaultValue={[20, 40]} />
     </div>
   </div>

examples/v-range.js

@@ -5,7 +5,8 @@ const React = require('react');
 const ReactDOM = require('react-dom');
 const Slider = require('rc-slider');
 
-const style = {height: 400, marginBottom: 50, marginLeft: 50};
+const style = {float: 'left', 'marginBottom': 20, width: 180, height: 400, marginBottom: 160, marginLeft: 50};
+const parentStyle = {overflow: 'hidden'};
 
 function log(value) {
   console.log(value);
@@ -38,6 +39,7 @@ const CustomizedRange = React.createClass({
   render: function() {
     return (
       <div style={style}>
+        <Slider range vertical allowCross={false} value={this.state.value} onChange={this.onSliderChange} />
         <label>LowerBound: </label>
         <input type="number" value={this.state.lowerBound} onChange={this.onLowerBoundChange} />
         <br />
@@ -45,8 +47,6 @@ const CustomizedRange = React.createClass({
         <input type="number" value={this.state.upperBound} onChange={this.onUpperBoundChange} />
         <br />
         <button onClick={this.handleApply}>Apply</button>
-        <br /><br />
-        <Slider range vertical allowCross={false} value={this.state.value} onChange={this.onSliderChange} />
       </div>
     );
   },
@@ -75,42 +75,41 @@ const DynamicBounds = React.createClass({
   render: function() {
     return (
       <div style={style}>
+        <Slider range vertical defaultValue={[20, 50]} min={this.state.min} max={this.state.max} onChange={this.onSliderChange} />
         <label>Min: </label>
         <input type="number" value={this.state.min} onChange={this.onMinChange} />
         <br />
         <label>Max: </label>
         <input type="number" value={this.state.max} onChange={this.onMaxChange} />
-        <br /><br />
-        <Slider range vertical defaultValue={[20, 50]} min={this.state.min} max={this.state.max} onChange={this.onSliderChange} />
       </div>
     );
   },
 });
 
 ReactDOM.render(
-  <div>
-    <p>Basic Range，`allowCross=false`</p>
+  <div style={parentStyle}>
     <div style={style}>
+      <p>Basic Range，`allowCross=false`</p>
       <Slider range vertical allowCross={false} defaultValue={[0, 20]} onChange={log} />
     </div>
-    <p>Basic Range，`step=20` </p>
     <div style={style}>
+      <p>Basic Range，`step=20` </p>
       <Slider range vertical step={20} defaultValue={[20, 40]} onBeforeChange={log} />
     </div>
-    <p>Basic Range，`step=20, dots` </p>
     <div style={style}>
+      <p>Basic Range，`step=20, dots` </p>
       <Slider range vertical dots step={20} defaultValue={[20, 40]} onAfterChange={log} />
     </div>
-    <p>Controlled Range</p>
     <div style={style}>
+      <p>Controlled Range</p>
       <Slider range vertical value={[20, 40]} />
     </div>
-    <p>Customized Range</p>
     <div style={style}>
+      <p>Customized Range</p>
       <CustomizedRange />
     </div>
-    <p>Range with dynamic `max` `min`</p>
     <div style={style}>
+      <p>Range with dynamic `max` `min`</p>
       <DynamicBounds />
     </div>
   </div>

examples/v-slider.js

@@ -5,7 +5,8 @@ const React = require('react');
 const ReactDOM = require('react-dom');
 const Slider = require('rc-slider');
 
-const style = {height: 400, marginBottom: 50, marginLeft: 50};
+const style = {float: 'left', 'marginBottom': 20, width: 200, height: 400, marginBottom: 160, marginLeft: 50};
+const parentStyle = {overflow: 'hidden'};
 
 function log(value) {
   console.log(value);
@@ -56,49 +57,48 @@ const DynamicBounds = React.createClass({
   render: function() {
     return (
       <div style={style}>
+        <p>Slider with dynamic `min` `max`</p>
+        <Slider vertical defaultValue={50} min={this.state.min} max={this.state.max} onChange={this.onSliderChange} />
         <label>Min: </label>
         <input type="number" value={this.state.min} onChange={this.onMinChange} />
         <br />
         <label>Max: </label>
         <input type="number" value={this.state.max} onChange={this.onMaxChange} />
-        <br /><br />
-        <Slider vertical defaultValue={50} min={this.state.min} max={this.state.max} onChange={this.onSliderChange} />
       </div>
     );
   },
 });
 
 ReactDOM.render(
-  <div>
-    <p>Basic Slider</p>
+  <div style={parentStyle}>
     <div style={style}>
+      <p>Basic Slider</p>
       <Slider vertical tipTransitionName="rc-slider-tooltip-zoom-down" onChange={log} />
     </div>
-    <p>Basic Slider，`step=20`</p>
     <div style={style}>
+      <p>Basic Slider，`step=20`</p>
       <Slider vertical step={20} defaultValue={50} onBeforeChange={log} />
     </div>
-    <p>Basic Slider，`step=20, dots`</p>
     <div style={style}>
+      <p>Basic Slider，`step=20, dots`</p>
       <Slider vertical dots step={20} defaultValue={100} onAfterChange={log} />
     </div>
-    <p>Basic Slider with `tipFormatter`</p>
     <div style={style}>
+      <p>Basic Slider with `tipFormatter`</p>
       <Slider vertical tipFormatter={percentFormatter} tipTransitionName="rc-slider-tooltip-zoom-down" onChange={log} />
     </div>
-    <p>Basic Slider without tooltip</p>
     <div style={style}>
+      <p>Basic Slider without tooltip</p>
       <Slider vertical tipFormatter={null} onChange={log} />
     </div>
-    <p>Controlled Slider</p>
     <div style={style}>
+      <p>Controlled Slider</p>
       <Slider vertical value={50} />
     </div>
-    <p>Customized Slider</p>
     <div style={style}>
+      <p>Customized Slider</p>
       <CustomizedSlider />
     </div>
-    <p>Slider with dynamic `min` `max`</p>
     <div>
       <DynamicBounds />
     </div>

package.json

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

src/Slider.jsx

@@ -357,7 +357,7 @@ class Slider extends React.Component {
       [prefixCls]: true,
       [prefixCls + '-disabled']: disabled,
       [className]: !!className,
-      ['rc-slider-vertical']: this.props.vertical,
+      [prefixCls + '-vertical']: this.props.vertical,
     });
     const isIncluded = included || range;
     return (