Slider: add input-size (#10154)

ElemeFE · Mar 14, 2018 · 1238dbf · 1238dbf
1 parent 2d12519
commit 1238dbf
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 2 deletions.
diff --git a/examples/docs/en-US/slider.md b/examples/docs/en-US/slider.md
@@ -234,6 +234,7 @@ Selecting a range of values is supported.
 | step | step size | number | — | 1 |
 | show-input | whether to display an input box, works when `range` is false | boolean | — | false |
 | show-input-controls | whether to display control buttons when `show-input` is true | boolean | — | true |
+| input-size | size of the input box | string | large / medium / small / mini | small |
 | show-stops | whether to display breakpoints | boolean | — | false |
 | show-tooltip | whether to display tooltip value | boolean | — | true |
 | format-tooltip | format to display tooltip value | function(value) | — | — |

diff --git a/examples/docs/es/slider.md b/examples/docs/es/slider.md
@@ -236,6 +236,7 @@ Se soporta la selección de un rango de valores.
 | step                | tamaño del paso                          | number          | —                 | 1           |
 | show-input          | Si se muestra el input, trabaja cuando`range`es false | boolean         | —                 | false       |
 | show-input-controls | si se muestran los botones de control cuando`show-input`es true | boolean         | —                 | true        |
+| input-size          | size of the input box                    | string           | large / medium / small / mini | small |
 | show-stops          | si se muestran los puntos de ruptura (breakpoints) | boolean         | —                 | false       |
 | show-tooltip        | si se muestra el valor en un tooltip     | boolean         | —                 | true        |
 | format-tooltip      | formato para mostrar el valor del tooltip | function(value) | —                 | —           |

diff --git a/examples/docs/zh-CN/slider.md b/examples/docs/zh-CN/slider.md
@@ -230,7 +230,8 @@
 | disabled | 是否禁用 | boolean | — | false |
 | step | 步长 | number | — | 1 |
 | show-input | 是否显示输入框，仅在非范围选择时有效 | boolean | — | false |
-| show-input-controls | 在显示输入框的情况下，是否显示输入框的控制按钮 | boolean | — | true|
+| show-input-controls | 在显示输入框的情况下，是否显示输入框的控制按钮 | boolean | — | true |
+| input-size | 输入框的尺寸 | string | large / medium / small / mini | small |
 | show-stops | 是否显示间断点 | boolean | — | false |
 | show-tooltip | 是否显示 tooltip | boolean | — | true |
 | format-tooltip | 格式化 tooltip message | function(value) | — | — |

diff --git a/packages/slider/src/main.vue b/packages/slider/src/main.vue
@@ -19,7 +19,7 @@
       :min="min"
       :max="max"
       :debounce="debounce"
-      size="small">
+      :size="inputSize">
     </el-input-number>
     <div class="el-slider__runway"
       :class="{ 'show-input': showInput, 'disabled': sliderDisabled }"
@@ -94,6 +94,10 @@
         type: Boolean,
         default: true
       },
+      inputSize: {
+        type: String,
+        default: 'small'
+      },
       showStops: {
         type: Boolean,
         default: false

diff --git a/packages/theme-chalk/src/slider.scss b/packages/theme-chalk/src/slider.scss
@@ -66,6 +66,19 @@
   @include e(input) {
     float: right;
     margin-top: 3px;
+    width: 130px;
+
+    &.el-input-number--mini {
+      margin-top: 5px;
+    }
+
+    &.el-input-number--medium {
+      margin-top: 0;
+    }
+
+    &.el-input-number--large {
+      margin-top: -2px;
+    }
   }
 
   @include e(bar) {

diff --git a/types/slider.d.ts b/types/slider.d.ts
@@ -36,6 +36,9 @@ export declare class ElSlider extends ElementUIComponent {
   /** Whether to display control buttons when show-input is true */
   showInputControls: boolean
 
+  /** Size of the input box */
+  inputSize: string
+
   /** Whether to display breakpoints */
   showStops: boolean