feat(slider): support vertical slider

CHANGELOG.en-US.md

@@ -13,6 +13,8 @@
 - `n-menu` add a color distinction between selected and unselected arrow, closes [#1535](https://github.com/TuSimple/naive-ui/issues/1535).
 - `n-menu` 's `defaultExpandedKeys` use watchEffect initialize, closes [#1536](https://github.com/TuSimple/naive-ui/issues/1536).
 - `n-date-picker`'s `type` prop support `year` option.
+- `n-slider` add `vertical` prop, closes [#1468](https://github.com/TuSimple/naive-ui/issues/1468).
+- `n-slider` add `reverse` prop.
 
 ### i18n
 
@@ -54,6 +56,10 @@
 - `n-image`'s `toolbar` add close icon, closes [#1412](https://github.com/TuSimple/naive-ui/issues/1412).
 - `n-tree`'s `on-load` prop is triggered when the `expanded-keys` prop changes in `remote` mode, closes [#1339](https://github.com/TuSimple/naive-ui/issues/1339).
 
+### Feats
+
+- `n-slider` add `vertical` prop, closes [#1468](https://github.com/TuSimple/naive-ui/issues/1468).
+
 ## 2.20.0 (2021-10-28)
 
 ### Breaking Changes

CHANGELOG.zh-CN.md

@@ -13,6 +13,8 @@
 - `n-menu` 添加箭头颜色区分选中未选中，关闭 [#1535](https://github.com/TuSimple/naive-ui/issues/1535)
 - `n-menu` 的 `defaultExpandedKeys` 使用 watchEffect 初始化，关闭 [#1536](https://github.com/TuSimple/naive-ui/issues/1536)
 - `n-date-picker` 属性 `type` 支持 `year` 选项
+- `n-slider` 新增 `vertical` 属性，关闭 [#1468](https://github.com/TuSimple/naive-ui/issues/1468)
+- `n-slider` 新增 `reverse` 属性
 
 ### i18n
 
@@ -54,6 +56,10 @@
 - `n-image` 的 `toolbar` 增加关闭图标，关闭 [#1412](https://github.com/TuSimple/naive-ui/issues/1412)
 - `n-tree` 的 `on-load` 属性在 `remote` 模式下 `expanded-keys` 属性改变时被触发，关闭 [#1339](https://github.com/TuSimple/naive-ui/issues/1339)
 
+### Feats
+
+- `n-slider` 新增 `vertical` 属性，关闭 [#1468](https://github.com/TuSimple/naive-ui/issues/1468)
+
 ## 2.20.0 (2021-10-28)
 
 ### Breaking Changes

src/slider/demos/enUS/index.demo-entry.md

@@ -11,6 +11,8 @@ mark
 disabled
 disable-tooltip
 format
+reverse
+vertical
 ```
 
 ## API
@@ -28,5 +30,7 @@ format
 | range           | `boolean`                                     | `false`     | Whether the slider uses range value. |
 | step            | `number`                                      | `1`         | Step of the slider.                  |
 | tooltip         | `boolean`                                     | `true`      | Whether to show tooltip.             |
+| reverse         | `boolean`                                     | `false`     | Whether to reverse the track.        |
+| vertical        | `boolean`                                     | `false`     | Whether to enable vertical mode.     |
 | value           | `number \| [number, number] \| null`          | `undefined` | Value of the slider.                 |
 | on-update:value | `(value: number \| [number, number]) => void` | `undefined` | Callback on value update.            |

src/slider/demos/enUS/reverse.demo.md

@@ -0,0 +1,22 @@
+# Reverse
+
+Set `reverse` to invert the track.
+
+```html
+<n-space vertical>
+  <n-slider v-model:value="value" :step="10" reverse />
+  <n-input-number size="small" v-model:value="value" />
+</n-space>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      value: ref(0)
+    }
+  }
+})
+```

src/slider/demos/enUS/vertical.demo.md

@@ -0,0 +1,29 @@
+# Vertical
+
+Set `vertical` to enable the vertical mode. Its height depends on the height of the container by default, and you can also customize the height.
+
+```html
+<n-space style="height: 300px; justify-content: center;">
+  <n-slider :default-value="77" vertical />
+  <n-slider :default-value="30" vertical disabled />
+  <n-slider v-model:value="value" :marks="marks" vertical range />
+</n-space>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      value: ref([20, 70]),
+      marks: {
+        0: '0°C',
+        20: '20°C',
+        37: '37°C',
+        100: '100°C'
+      }
+    }
+  }
+})
+```

src/slider/demos/zhCN/index.demo-entry.md

@@ -11,6 +11,8 @@ mark
 disabled
 disable-tooltip
 format
+reverse
+vertical
 ```
 
 ## API
@@ -28,5 +30,7 @@ format
 | range | `boolean` | `false` | 是否选择范围值 |
 | step | `number` | `1` | 步长 |
 | tooltip | `boolean` | `true` | 是否展示 tooltip |
+| reverse | `boolean` | `false` | 是否倒转轨道 |
+| vertical | `boolean` | `false` | 是否启用垂直模式 |
 | value | `number \| [number, number] \| null` | `undefined` | 值 |
 | on-update:value | `(value: number \| [number, number]) => void` | `undefined` | 值更新的回调 |

src/slider/demos/zhCN/reverse.demo.md

@@ -0,0 +1,22 @@
+# 倒转
+
+设定 `reverse` 可以将轨道倒转过来。
+
+```html
+<n-space vertical>
+  <n-slider v-model:value="value" :step="10" reverse />
+  <n-input-number size="small" v-model:value="value" />
+</n-space>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      value: ref(0)
+    }
+  }
+})
+```

src/slider/demos/zhCN/vertical.demo.md

@@ -0,0 +1,30 @@
+# 垂直
+
+设定 `vertical` 来启用垂直模式，它的高度默认依赖于容器的高度，你也可以自定义高度。
+
+```html
+<n-space style="height: 300px; justify-content: center;">
+  <n-slider :default-value="77" vertical />
+  <n-slider :default-value="20" vertical reverse />
+  <n-slider :default-value="30" vertical disabled />
+  <n-slider v-model:value="value" :marks="marks" vertical range />
+</n-space>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      value: ref([20, 70]),
+      marks: {
+        0: '0°C',
+        20: '20°C',
+        37: '37°C',
+        100: '100°C'
+      }
+    }
+  }
+})
+```