add slider vertical style

components/slider/__tests__/__snapshots__/demo.test.js.snap

@@ -528,3 +528,105 @@ exports[`test renders ./components/slider/demo/tip-formatter.md correctly 1`] =
   </div>
 </div>
 `;
+
+exports[`test renders ./components/slider/demo/vertical.md correctly 1`] = `
+<div
+  style="height:300px;">
+  <div
+    style="float:left;height:300px;margin-left:70px;">
+    <div
+      class="ant-slider ant-slider-vertical">
+      <div
+        class="ant-slider-rail" />
+      <div
+        class="ant-slider-track ant-slider-track-1"
+        style="visibility:visible;bottom:0%;height:30%;" />
+      <div
+        class="ant-slider-step" />
+      <div
+        class="ant-slider-handle ant-slider-handle-2 ant-slider-handle-upper"
+        style="bottom:30%;" />
+      <div
+        class="ant-slider-mark" />
+    </div>
+  </div>
+  <div
+    style="float:left;height:300px;margin-left:70px;">
+    <div
+      class="ant-slider ant-slider-vertical">
+      <div
+        class="ant-slider-rail" />
+      <div
+        class="ant-slider-track ant-slider-track-1"
+        style="visibility:visible;bottom:20%;height:30%;" />
+      <div
+        class="ant-slider-step" />
+      <div
+        class="ant-slider-handle ant-slider-handle-1 ant-slider-handle-lower"
+        style="bottom:20%;" />
+      <div
+        class="ant-slider-handle ant-slider-handle-2 ant-slider-handle-upper"
+        style="bottom:50%;" />
+      <div
+        class="ant-slider-mark" />
+    </div>
+  </div>
+  <div
+    style="float:left;height:300px;margin-left:70px;">
+    <div
+      class="ant-slider ant-slider-with-marks ant-slider-vertical">
+      <div
+        class="ant-slider-rail" />
+      <div
+        class="ant-slider-track ant-slider-track-1"
+        style="visibility:visible;bottom:26%;height:11%;" />
+      <div
+        class="ant-slider-step">
+        <span
+          class="ant-slider-dot"
+          style="bottom:0%;" />
+        <span
+          class="ant-slider-dot ant-slider-dot-active"
+          style="bottom:26%;" />
+        <span
+          class="ant-slider-dot ant-slider-dot-active"
+          style="bottom:37%;" />
+        <span
+          class="ant-slider-dot"
+          style="bottom:100%;" />
+      </div>
+      <div
+        class="ant-slider-handle ant-slider-handle-1 ant-slider-handle-lower"
+        style="bottom:26%;" />
+      <div
+        class="ant-slider-handle ant-slider-handle-2 ant-slider-handle-upper"
+        style="bottom:37%;" />
+      <div
+        class="ant-slider-mark">
+        <span
+          class="ant-slider-mark-text"
+          style="margin-bottom:-50%;bottom:0%;">
+          0°C
+        </span>
+        <span
+          class="ant-slider-mark-text ant-slider-mark-text-active"
+          style="margin-bottom:-50%;bottom:26%;">
+          26°C
+        </span>
+        <span
+          class="ant-slider-mark-text ant-slider-mark-text-active"
+          style="margin-bottom:-50%;bottom:37%;">
+          37°C
+        </span>
+        <span
+          class="ant-slider-mark-text"
+          style="margin-bottom:-50%;bottom:100%;color:#f50;">
+          <strong>
+            100°C
+          </strong>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;

components/slider/demo/vertical.md

@@ -0,0 +1,51 @@
+---
+order: 6
+title:
+  zh-CN: 垂直
+  en-US: Vertical
+---
+
+## zh-CN
+
+垂直方向的 Slider。
+
+## en-US
+
+The vertical Slider.
+
+````jsx
+import { Slider } from 'antd';
+
+const style = {
+  float: 'left',
+  height: 300,
+  marginLeft: 70,
+};
+
+const marks = {
+  0: '0°C',
+  26: '26°C',
+  37: '37°C',
+  100: {
+    style: {
+      color: '#f50',
+    },
+    label: <strong>100°C</strong>,
+  },
+};
+
+ReactDOM.render(
+  <div style={{ height: 300 }}>
+    <div style={style}>
+      <Slider vertical defaultValue={30} />
+    </div>
+    <div style={style}>
+      <Slider vertical range step={10} defaultValue={[20, 50]} />
+    </div>
+    <div style={style}>
+      <Slider vertical range marks={marks} defaultValue={[26, 37]} />
+    </div>
+  </div>,
+  mountNode
+);
+````

components/slider/index.en-US.md

@@ -24,6 +24,7 @@ To input a value in a range.
 | defaultValue   | The default value of slider. When `range` is `false`, use `Number`, otherwise, use `[Number, Number]`   | Number or [Number, Number] | 0 or [0, 0]
 | included       | Make effect when `marks` not null，`true` means containment and `false` means coordinative | Boolean			 | true
 | disabled       | If true, the slider will not be interactable. | Boolean 			| false
+| vertical       | If true, the slider will be vertical. | Boolean | false
 | onChange       | Callback function that is fired when the user changes the slider's value. | Function(value) | NOOP
 | onAfterChange  | Fire when  `onmouseup` is fired. | Function(value) | NOOP
 | tipFormatter   | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | Function or null | IDENTITY

components/slider/index.tsx

@@ -22,6 +22,7 @@ export interface SliderProps {
   defaultValue?: SliderValue;
   included?: boolean;
   disabled?: boolean;
+  vertical?: boolean;
   onChange?: (value: SliderValue) => void;
   onAfterChange?: (value: SliderValue) => void;
   tipFormatter?: void | ((value: number) => React.ReactNode);

components/slider/index.zh-CN.md

@@ -25,6 +25,7 @@ title: Slider
 | defaultValue   | 设置初始取值。当 `range` 为 `false` 时，使用 `Number`，否则用 `[Number, Number]`   | Number or [Number, Number] | 0 or [0, 0]
 | included       | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | Boolean			 | true
 | disabled       | 值为 `true` 时，滑块为禁用状态 | Boolean 			| false
+| vertical       | 值为 `true` 时，Slider 为垂直方向 | Boolean | false
 | onChange       | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。 | Function(value) | NOOP
 | onAfterChange  | 与 `onmouseup` 触发时机一致，把当前值作为参数传入。 | Function(value) | NOOP
 | tipFormatter   | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function or null | IDENTITY

components/slider/style/index.less

@@ -22,6 +22,8 @@
   border-bottom: 4px solid #fff;
   transition: background-color 0.3s ease;
 
+  .vertical();
+
   &-with-marks {
     margin-bottom: 28px;
   }
@@ -144,3 +146,46 @@
     }
   }
 }
+
+.vertical() {
+  &-vertical {
+    width: 12px;
+    height: 100%;
+    margin: 6px 10px;
+    border: 4px solid #fff;
+    border-top: 0 none;
+    border-bottom: 0 none;
+
+    .@{slider-prefix-cls}-track {
+      width: 4px;
+    }
+
+    .@{slider-prefix-cls}-handle {
+      margin-left: -5px;
+      margin-bottom: -7px;
+    }
+
+    .@{slider-prefix-cls}-mark {
+      top: 0;
+      left: 8px;
+      width: 18px;
+      height: 100%;
+    }
+
+    .@{slider-prefix-cls}-mark-text {
+      left: 4px;
+      white-space: nowrap;
+    }
+
+    .@{slider-prefix-cls}-step {
+      width: 4px;
+      height: 100%;
+    }
+
+    .@{slider-prefix-cls}-dot {
+      top: auto;
+      left: 2px;
+      margin-bottom: -4px;
+    }
+  }
+}