Slider: update vertical mode (#4375)

examples/docs/en-US/slider.md

@@ -174,16 +174,14 @@ Selecting a range of values is supported.
 
 ### Vertical mode
 
-Vertical slider
-
-:::demo Setting the `vertical` attribute to switch to the vertical mode, the `size` attribute must be setted as the heigth of slider
+:::demo Setting the `vertical` attribute to `true` enables vertical mode. In vertical mode, the `height` attribute is required.
 ```html
 <template>
   <div class="block">
     <el-slider
       v-model="value10"
       vertical
-      size="300px">
+      height="200px">
     </el-slider>
   </div>
 </template>
@@ -214,7 +212,7 @@ Vertical slider
 | format-tooltip | format to display tooltip value | Function(value) | — | — |
 | range | whether to select a range | boolean | — | false |
 | vertical | vertical mode | boolean | — | false |
-| size | width or height, it should be setted when vertical mode | String | — | - |
+| height | Slider height, required in vertical mode | String | — | — |
 
 ## Events
 | Event Name | Description | Parameters |

examples/docs/zh-CN/slider.md

@@ -198,16 +198,14 @@
 
 ### 竖向模式
 
-竖向滑块
-
-:::demo 设置`vertical`可使滑块变成竖向模式，必须设置滑块高度`size`属性
+:::demo 设置`vertical`可使 Slider 变成竖向模式，此时必须设置高度`height`属性
 ```html
 <template>
   <div class="block">
     <el-slider
       v-model="value10"
       vertical
-      size="300px">
+      height="200px">
     </el-slider>
   </div>
 </template>
@@ -238,7 +236,7 @@
 | format-tooltip | 格式化 tooltip message | Function(value) | — | — |
 | range | 是否为范围选择 | boolean | — | false |
 | vertical | 是否竖向模式 | boolean | — | false |
-| size | 宽度或高度，竖向模式时务必设置 | String | — | - |
+| height | Slider 高度，竖向模式时必填 | String | — | — |
 
 ### Events
 | 事件名称      | 说明    | 回调参数      |

packages/slider/src/button.vue

@@ -5,7 +5,7 @@
     @mouseleave="handleMouseLeave"
     @mousedown="onButtonDown"
     :class="{ 'hover': hovering, 'dragging': dragging }"
-    :style="this.vertical ? { bottom: currentPosition } : { left: currentPosition }"
+    :style="wrapperStyle"
     ref="button">
     <el-tooltip placement="top" ref="tooltip" :disabled="!showTooltip">
       <span slot="content">{{ formatValue }}</span>
@@ -84,6 +84,10 @@
 
       formatValue() {
         return this.enableFormat && this.$parent.formatTooltip(this.value) || this.value;
+      },
+
+      wrapperStyle() {
+        return this.vertical ? { bottom: this.currentPosition } : { left: this.currentPosition };
       }
     },
 

packages/slider/src/main.vue

 <template>
   <div class="el-slider"
-    :class="{ 'el-slider__vertical': vertical, 'el-slider__with_input': showInput }">
+    :class="{ 'is-vertical': vertical, 'el-slider--with-input': showInput }">
     <el-input-number
       v-model="firstValue"
       v-if="showInput && !range"
@@ -15,18 +15,12 @@
     </el-input-number>
     <div class="el-slider__runway"
       :class="{ 'show-input': showInput, 'disabled': disabled }"
-      :style="vertical ? size && { height: size } : size && { width: size }"
+      :style="runwayStyle"
       @click="onSliderClick"
       ref="slider">
       <div
         class="el-slider__bar"
-        :style="vertical ? {
-          height: barSize,
-          bottom: barStart
-        } : {
-          width: barSize,
-          left: barStart
-        }">
+        :style="barStyle">
       </div>
       <slider-button
         :vertical="vertical"
@@ -106,7 +100,7 @@
         type: Boolean,
         default: false
       },
-      size: {
+      height: {
         type: String
       }
     },
@@ -229,7 +223,7 @@
         if (this.disabled || this.dragging) return;
         if (this.vertical) {
           const sliderOffsetBottom = this.$refs.slider.getBoundingClientRect().bottom;
-          this.setPosition((event.clientY - sliderOffsetBottom) / this.$sliderSize * 100);
+          this.setPosition((sliderOffsetBottom - event.clientY) / this.$sliderSize * 100);
         } else {
           const sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
           this.setPosition((event.clientX - sliderOffsetLeft) / this.$sliderSize * 100);
@@ -285,6 +279,21 @@
           return decimal ? decimal.length : 0;
         });
         return Math.max.apply(null, precisions);
+      },
+
+      runwayStyle() {
+        return this.vertical ? { height: this.height } : {};
+      },
+
+      barStyle() {
+        return this.vertical
+          ? {
+            height: this.barSize,
+            bottom: this.barStart
+          } : {
+            width: this.barSize,
+            left: this.barStart
+          };
       }
     },
 

packages/theme-default/src/slider.css

@@ -129,7 +129,7 @@
       transform: translateX(-50%);
     }
 
-    @e vertical {
+    @when vertical {
       position: relative;
       .el-slider__runway {
         width: 4px;
@@ -149,13 +149,13 @@
       .el-slider__stop {
         transform: translateY(50%);
       }
-      &.el-slider__with_input {
-        padding-bottom: var(--input-large-height);
+      &.el-slider--with-input {
+        padding-bottom: calc(var(--input-large-height) + 22px);
         .el-slider__input {
           overflow: visible;
           float: none;
           position: absolute;
-          bottom: 0;
+          bottom: 22px;
           width: 36px;
           margin-top: 15px;
           .el-input__inner {

test/unit/specs/slider.spec.js

@@ -238,6 +238,30 @@ describe('Slider', () => {
     expect(stops.length).to.equal(9);
   });
 
+  it('vertical mode', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-slider vertical v-model="value" height="200px"></el-slider>
+        </div>
+      `,
+
+      data() {
+        return {
+          value: 0
+        };
+      }
+    }, true);
+    const slider = vm.$children[0];
+    setTimeout(() => {
+      slider.onSliderClick({ clientY: 100 });
+      setTimeout(() => {
+        expect(vm.value > 0).to.true;
+        done();
+      }, 10);
+    }, 10);
+  });
+
   describe('range', () => {
     it('basic ranged slider', () => {
       vm = createVue({