feat: vertical slider

- add `vertical` props - add vertical slider demo: v-marks.html v-range.html v-slider.html refs:react-component/slider#18
blue-git-pro · Apr 1, 2016 · 04bb0b3 · 04bb0b3
1 parent 5dcb000
commit 04bb0b3
Show file tree

Hide file tree

Showing 16 changed files with 388 additions and 36 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -1,6 +1,11 @@
 # History
 ----
 
+## 3.5.2 / 2016-04-01
+
+[#18](https://github.com/react-component/slider/issues/18) add `vertical` props ([@wnlee](https://github.com/WNLee))
+
+...
 
 ## 1.2.5 / 2015-07-13
 

diff --git a/README.md b/README.md
@@ -112,6 +112,12 @@ ReactDOM.render(<Rcslider />, container);
           <td>true</td>
           <td>When `range` is `true`, `allowCross` could be set as `true` to allow those two handles cross.</td>
         </tr>
+        <tr>
+          <td>vertical</td>
+          <td>boolean</td>
+          <td>false</td>
+          <td>If vertical is `true`, the slider will be vertical.</td>
+        </tr>
         <tr>
           <td>defaultValue</td>
           <td>number or [number, number]</td>

diff --git a/assets/index.less b/assets/index.less
@@ -94,7 +94,7 @@
 
   &-dot {
     position: absolute;
-    top: -2px;
+    bottom: -2px;
     margin-left: -4px;
     width: 8px;
     height: 8px;
@@ -133,6 +133,45 @@
   }
 }
 
+.rc-slider-vertical {
+  width: 4px;
+  height: 100%;
+  .@{prefixClass} {
+    &-track {
+      bottom: 0;
+      width: 4px;
+    }
+
+    &-handle {
+      position: absolute;
+      margin-left: -5px;
+      margin-bottom: -7px;
+    }
+
+    &-mark {
+      top: 0;
+      left: 10px;
+      height: 100%;
+    }
+
+    &-step {
+      height: 100%;
+      width: 4px;
+    }
+
+    &-dot {
+      left: 2px;
+      margin-bottom: -4px;
+      &:first-child {
+        margin-bottom: -4px;
+      }
+      &:last-child {
+        margin-bottom: -4px;
+      }
+    }
+  }
+}
+
 .motion-common() {
   animation-duration: .3s;
   animation-fill-mode: both;

diff --git a/examples/v-marks.html b/examples/v-marks.html
@@ -0,0 +1 @@
+placeholder
diff --git a/examples/v-marks.js b/examples/v-marks.js
@@ -0,0 +1,53 @@
+require('rc-slider/assets/index.less');
+
+const React = require('react');
+const ReactDOM = require('react-dom');
+const Slider = require('rc-slider');
+
+const style = {height: 400, marginBottom: 50, marginLeft: 50};
+const marks = {
+  '-10': '-10°C',
+  0: <strong>0°C</strong>,
+  26: '26°C',
+  37: '37°C',
+  50: '50°C',
+  100: {
+    style: {
+      color: 'red',
+    },
+    label: <strong>100°C</strong>,
+  },
+};
+
+function log(value) {
+  console.log(value);
+}
+
+ReactDOM.render(
+  <div>
+    <p>Slider with marks, `step=null`</p>
+    <div style={style}>
+      <Slider vertical min={-10} marks={marks} step={null} onChange={log} defaultValue={20} />
+    </div>
+    <p>Slider with marks and steps</p>
+    <div style={style}>
+      <Slider vertical dots min={-10} marks={marks} step={10} onChange={log} defaultValue={20} />
+    </div>
+    <p>Slider with marks, `included=false`</p>
+    <div style={style}>
+      <Slider vertical min={-10} marks={marks} included={false} defaultValue={20} />
+    </div>
+    <p>Slider with marks and steps, `included=false`</p>
+    <div style={style}>
+      <Slider vertical min={-10} marks={marks} step={10} included={false} defaultValue={20} />
+    </div>
+    <p>Range with marks</p>
+    <div style={style}>
+      <Slider vertical min={-10} range marks={marks} onChange={log} defaultValue={[20, 40]} />
+    </div>
+    <p>Range with marks and steps</p>
+    <div style={style}>
+      <Slider vertical min={-10} range marks={marks} step={10} onChange={log} defaultValue={[20, 40]} />
+    </div>
+  </div>
+  , document.getElementById('__react-content'));
diff --git a/examples/v-range.html b/examples/v-range.html
diff --git a/examples/v-range.js b/examples/v-range.js
@@ -0,0 +1,117 @@
+/* eslint react/no-multi-comp: 0 */
+require('rc-slider/assets/index.less');
+
+const React = require('react');
+const ReactDOM = require('react-dom');
+const Slider = require('rc-slider');
+
+const style = {height: 400, marginBottom: 50, marginLeft: 50};
+
+function log(value) {
+  console.log(value);
+}
+
+const CustomizedRange = React.createClass({
+  getInitialState: function() {
+    return {
+      lowerBound: 20,
+      upperBound: 40,
+      value: [20, 40],
+    };
+  },
+  onLowerBoundChange: function(e) {
+    this.setState({ lowerBound: +e.target.value });
+  },
+  onUpperBoundChange: function(e) {
+    this.setState({ upperBound: +e.target.value });
+  },
+  onSliderChange: function(value) {
+    log(value);
+    this.setState({
+      value: value,
+    });
+  },
+  handleApply: function() {
+    const { lowerBound, upperBound } = this.state;
+    this.setState({ value: [lowerBound, upperBound]});
+  },
+  render: function() {
+    return (
+      <div style={style}>
+        <label>LowerBound: </label>
+        <input type="number" value={this.state.lowerBound} onChange={this.onLowerBoundChange} />
+        <br />
+        <label>UpperBound: </label>
+        <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>
+    );
+  },
+});
+
+const DynamicBounds = React.createClass({
+  getInitialState() {
+    return {
+      min: 0,
+      max: 100,
+    };
+  },
+  onSliderChange: function(value) {
+    log(value);
+  },
+  onMinChange: function(e) {
+    this.setState({
+      min: +e.target.value || 0,
+    });
+  },
+  onMaxChange: function(e) {
+    this.setState({
+      max: +e.target.value || 100,
+    });
+  },
+  render: function() {
+    return (
+      <div style={style}>
+        <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={style}>
+      <Slider range vertical allowCross={false} defaultValue={[0, 20]} onChange={log} />
+    </div>
+    <p>Basic Range，`step=20` </p>
+    <div style={style}>
+      <Slider range vertical step={20} defaultValue={[20, 40]} onBeforeChange={log} />
+    </div>
+    <p>Basic Range，`step=20, dots` </p>
+    <div style={style}>
+      <Slider range vertical dots step={20} defaultValue={[20, 40]} onAfterChange={log} />
+    </div>
+    <p>Controlled Range</p>
+    <div style={style}>
+      <Slider range vertical value={[20, 40]} />
+    </div>
+    <p>Customized Range</p>
+    <div style={style}>
+      <CustomizedRange />
+    </div>
+    <p>Range with dynamic `max` `min`</p>
+    <div style={style}>
+      <DynamicBounds />
+    </div>
+  </div>
+  , document.getElementById('__react-content'));
diff --git a/examples/v-slider.html b/examples/v-slider.html
@@ -0,0 +1 @@
+placeholder
diff --git a/examples/v-slider.js b/examples/v-slider.js
@@ -0,0 +1,106 @@
+/* eslint react/no-multi-comp: 0 */
+require('rc-slider/assets/index.less');
+
+const React = require('react');
+const ReactDOM = require('react-dom');
+const Slider = require('rc-slider');
+
+const style = {height: 400, marginBottom: 50, marginLeft: 50};
+
+function log(value) {
+  console.log(value);
+}
+
+
+function percentFormatter(v) {
+  return v + ' %';
+}
+
+const CustomizedSlider = React.createClass({
+  getInitialState: function() {
+    return {
+      value: 50,
+    };
+  },
+  onSliderChange: function(value) {
+    log(value);
+    this.setState({
+      value: value,
+    });
+  },
+  render: function() {
+    return <Slider vertical value={this.state.value} onChange={this.onSliderChange} />;
+  },
+});
+
+const DynamicBounds = React.createClass({
+  getInitialState: function() {
+    return {
+      min: 0,
+      max: 100,
+    };
+  },
+  onSliderChange: function(value) {
+    log(value);
+  },
+  onMinChange: function(e) {
+    this.setState({
+      min: +e.target.value || 0,
+    });
+  },
+  onMaxChange: function(e) {
+    this.setState({
+      max: +e.target.value || 100,
+    });
+  },
+  render: function() {
+    return (
+      <div style={style}>
+        <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={style}>
+      <Slider vertical tipTransitionName="rc-slider-tooltip-zoom-down" onChange={log} />
+    </div>
+    <p>Basic Slider，`step=20`</p>
+    <div style={style}>
+      <Slider vertical step={20} defaultValue={50} onBeforeChange={log} />
+    </div>
+    <p>Basic Slider，`step=20, dots`</p>
+    <div style={style}>
+      <Slider vertical dots step={20} defaultValue={100} onAfterChange={log} />
+    </div>
+    <p>Basic Slider with `tipFormatter`</p>
+    <div style={style}>
+      <Slider vertical tipFormatter={percentFormatter} tipTransitionName="rc-slider-tooltip-zoom-down" onChange={log} />
+    </div>
+    <p>Basic Slider without tooltip</p>
+    <div style={style}>
+      <Slider vertical tipFormatter={null} onChange={log} />
+    </div>
+    <p>Controlled Slider</p>
+    <div style={style}>
+      <Slider vertical value={50} />
+    </div>
+    <p>Customized Slider</p>
+    <div style={style}>
+      <CustomizedSlider />
+    </div>
+    <p>Slider with dynamic `min` `max`</p>
+    <div>
+      <DynamicBounds />
+    </div>
+  </div>
+  , document.getElementById('__react-content'));
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-slider",
-  "version": "3.5.1",
+  "version": "3.5.2",
   "description": "slider ui component for react",
   "keywords": [
     "react",

diff --git a/src/Handle.jsx b/src/Handle.jsx
@@ -24,10 +24,10 @@ export default class Handle extends React.Component {
 
   render() {
     const props = this.props;
-    const {className, tipTransitionName, tipFormatter, offset, value} = props;
+    const {className, tipTransitionName, tipFormatter, vertical, offset, value} = props;
     const {dragging, noTip} = props;
 
-    const style = { left: offset + '%' };
+    const style = vertical ? { bottom: offset + '%' } : { left: offset + '%' };
     const handle = (<div className={className} style={style}
                       onMouseUp={this.showTooltip.bind(this)}
                       onMouseEnter={this.showTooltip.bind(this)}
@@ -52,6 +52,7 @@ export default class Handle extends React.Component {
 
 Handle.propTypes = {
   className: React.PropTypes.string,
+  vertical: React.PropTypes.bool,
   offset: React.PropTypes.number,
   tipTransitionName: React.PropTypes.string,
   tipFormatter: React.PropTypes.func,