Slider 滑块

通过拖动滑块在一个固定区间内进行选择

基础用法

在拖动滑块时，显示当前值

Slider 滑块 - 图1

通过设置绑定值自定义滑块的初始值

  1. <template>
  2.   <div class="block">
  3.     <span class="demonstration">默认</span>
  4.     <el-slider v-model="value1"></el-slider>
  5.   </div>
  6.   <div class="block">
  7.     <span class="demonstration">自定义初始值</span>
  8.     <el-slider v-model="value2"></el-slider>
  9.   </div>
  10.   <div class="block">
  11.     <span class="demonstration">隐藏 Tooltip</span>
  12.     <el-slider v-model="value3" :show-tooltip="false"></el-slider>
  13.   </div>
  14.   <div class="block">
  15.     <span class="demonstration">格式化 Tooltip</span>
  16.     <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
  17.   </div>
  18.   <div class="block">
  19.     <span class="demonstration">禁用</span>
  20.     <el-slider v-model="value5" disabled></el-slider>
  21.   </div>
  22. </template>
  24. <script>
  25.   export default {
  26.     data() {
  27.       return {
  28.         value1: 0,
  29.         value2: 50,
  30.         value3: 36,
  31.         value4: 48,
  32.         value5: 42
  33.       }
  34.     },
  35.     methods: {
  36.       formatTooltip(val) {
  37.         return val / 100;
  38.       }
  39.     }
  40.   }
  41. </script>

离散值

选项可以是离散的

Slider 滑块 - 图2

改变step的值可以改变步长，通过设置show-step属性可以显示间断点

  1. <template>
  2.   <div class="block">
  3.     <span class="demonstration">不显示间断点</span>
  4.     <el-slider
  5.       v-model="value6"
  6.       :step="10">
  7.     </el-slider>
  8.   </div>
  9.   <div class="block">
  10.     <span class="demonstration">显示间断点</span>
  11.     <el-slider
  12.       v-model="value7"
  13.       :step="10"
  14.       show-stops>
  15.     </el-slider>
  16.   </div>
  17. </template>
  19. <script>
  20.   export default {
  21.     data() {
  22.       return {
  23.         value6: 0,
  24.         value7: 0
  25.       }
  26.     }
  27.   }
  28. </script>

显示代码

带有输入框

通过输入框设置精确数值

Slider 滑块 - 图3

设置show-input属性会在右侧显示一个输入框

  1. <template>
  2.   <div class="block">
  3.     <el-slider
  4.       v-model="value8"
  5.       show-input>
  6.     </el-slider>
  7.   </div>
  8. </template>
  10. <script>
  11.   export default {
  12.     data() {
  13.       return {
  14.         value8: 0
  15.       }
  16.     }
  17.   }
  18. </script>

范围选择

支持选择某一数值范围

Slider 滑块 - 图4

设置range即可开启范围选择，此时绑定值是一个数组，其元素分别为最小边界值和最大边界值

  1. <template>
  2.   <div class="block">
  3.     <el-slider
  4.       v-model="value9"
  5.       range
  6.       show-stops
  7.       :max="10">
  8.     </el-slider>
  9.   </div>
  10. </template>
  12. <script>
  13.   export default {
  14.     data() {
  15.       return {
  16.         value9: [4, 8]
  17.       }
  18.     }
  19.   }
  20. </script>

竖向模式

Slider 滑块 - 图5

设置vertical可使 Slider 变成竖向模式，此时必须设置高度height属性

  1. <template>
  2.   <div class="block">
  3.     <el-slider
  4.       v-model="value10"
  5.       vertical
  6.       height="200px">
  7.     </el-slider>
  8.   </div>
  9. </template>
  11. <script>
  12.   export default {
  13.     data() {
  14.       return {
  15.         value10: 0
  16.       }
  17.     }
  18.   }
  19. </script>

Attributes

参数 说明 类型 可选值 默认值
min 最小值 number — 0
max 最大值 number — 100
disabled 是否禁用 boolean — false
step 步长 number — 1
show-input 是否显示输入框，仅在非范围选择时有效 boolean — false
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) — —
range 是否为范围选择 boolean — false
vertical 是否竖向模式 boolean — false
height Slider 高度，竖向模式时必填 string — —
label 屏幕阅读器标签 string — —
debounce 输入时的去抖延迟，毫秒，仅在show-input等于true时有效 number — 300
tooltip-class tooltip 的自定义类名 string — —

Events

事件名称 说明 回调参数
change 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发） 改变后的值

原文: http://element-cn.eleme.io/#/zh-CN/component/slider