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>
  23. <script>
  24. export default {
  25. data() {
  26. return {
  27. value1: 0,
  28. value2: 50,
  29. value3: 36,
  30. value4: 48,
  31. value5: 42
  32. }
  33. },
  34. methods: {
  35. formatTooltip(val) {
  36. return val / 100;
  37. }
  38. }
  39. }
  40. </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>
  18. <script>
  19. export default {
  20. data() {
  21. return {
  22. value6: 0,
  23. value7: 0
  24. }
  25. }
  26. }
  27. </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>
  9. <script>
  10. export default {
  11. data() {
  12. return {
  13. value8: 0
  14. }
  15. }
  16. }
  17. </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>
  11. <script>
  12. export default {
  13. data() {
  14. return {
  15. value9: [4, 8]
  16. }
  17. }
  18. }
  19. </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>
  10. <script>
  11. export default {
  12. data() {
  13. return {
  14. value10: 0
  15. }
  16. }
  17. }
  18. </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