Slider 滑块

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

基础用法

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

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

Slider 滑块 - 图1

  1. <template>
  2.   <div class="slider-demo-block">
  3.     <span class="demonstration">Default value</span>
  4.     <el-slider v-model="value1" />
  5.   </div>
  6.   <div class="slider-demo-block">
  7.     <span class="demonstration">Customized initial value</span>
  8.     <el-slider v-model="value2" />
  9.   </div>
  10.   <div class="slider-demo-block">
  11.     <span class="demonstration">Hide Tooltip</span>
  12.     <el-slider v-model="value3" :show-tooltip="false" />
  13.   </div>
  14.   <div class="slider-demo-block">
  15.     <span class="demonstration">Format Tooltip</span>
  16.     <el-slider v-model="value4" :format-tooltip="formatTooltip" />
  17.   </div>
  18.   <div class="slider-demo-block">
  19.     <span class="demonstration">Disabled</span>
  20.     <el-slider v-model="value5" disabled />
  21.   </div>
  22. </template>
  24. <script lang="ts" setup>
  25. import { ref } from 'vue'
  27. const value1 = ref(0)
  28. const value2 = ref(0)
  29. const value3 = ref(0)
  30. const value4 = ref(0)
  31. const value5 = ref(0)
  33. const formatTooltip = (val: number) => {
  34.   return val / 100
  35. }
  36. </script>
  37. <style scoped>
  38. .slider-demo-block {
  39.   display: flex;
  40.   align-items: center;
  41. }
  42. .slider-demo-block .el-slider {
  43.   margin-top: 0;
  44.   margin-left: 12px;
  45. }
  46. .slider-demo-block .demonstration {
  47.   font-size: 14px;
  48.   color: var(--el-text-color-secondary);
  49.   line-height: 44px;
  50.   flex: 1;
  51.   overflow: hidden;
  52.   text-overflow: ellipsis;
  53.   white-space: nowrap;
  54.   margin-bottom: 0;
  55. }
  56. .slider-demo-block .demonstration + .el-slider {
  57.   flex: 0 0 70%;
  58. }
  59. </style>

离散值

选项可以是离散的

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

Slider 滑块 - 图2

  1. <template>
  2.   <div class="slider-demo-block">
  3.     <span class="demonstration">Breakpoints not displayed</span>
  4.     <el-slider v-model="value1" :step="10" />
  5.   </div>
  6.   <div class="slider-demo-block">
  7.     <span class="demonstration">Breakpoints displayed</span>
  8.     <el-slider v-model="value2" :step="10" show-stops />
  9.   </div>
  10. </template>
  12. <script lang="ts" setup>
  13. import { ref } from 'vue'
  15. const value1 = ref(0)
  16. const value2 = ref(0)
  17. </script>
  18. <style scoped>
  19. .slider-demo-block {
  20.   display: flex;
  21.   align-items: center;
  22. }
  23. .slider-demo-block .el-slider {
  24.   margin-top: 0;
  25.   margin-left: 12px;
  26. }
  27. .slider-demo-block .demonstration {
  28.   font-size: 14px;
  29.   color: var(--el-text-color-secondary);
  30.   line-height: 44px;
  31.   flex: 1;
  32.   overflow: hidden;
  33.   text-overflow: ellipsis;
  34.   white-space: nowrap;
  35.   margin-bottom: 0;
  36. }
  37. .slider-demo-block .demonstration + .el-slider {
  38.   flex: 0 0 70%;
  39. }
  40. </style>

带有输入框的滑块

通过输入框设置精确数值

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

Slider 滑块 - 图3

  1. <template>
  2.   <div class="slider-demo-block">
  3.     <el-slider v-model="value" show-input />
  4.   </div>
  5. </template>
  7. <script lang="ts" setup>
  8. import { ref } from 'vue'
  10. const value = ref(0)
  11. </script>
  12. <style scoped>
  13. .slider-demo-block {
  14.   display: flex;
  15.   align-items: center;
  16. }
  17. .slider-demo-block .el-slider {
  18.   margin-top: 0;
  19.   margin-left: 12px;
  20. }
  21. </style>

不同尺寸

Slider 滑块 - 图4

  1. <template>
  2.   <el-slider v-model="value" show-input size="large" />
  3.   <el-slider v-model="value" show-input />
  4.   <el-slider v-model="value" show-input size="small" />
  5. </template>
  7. <script lang="ts" setup>
  8. import { ref } from 'vue'
  10. const value = ref(0)
  11. </script>
  13. <style scoped>
  14. .el-slider {
  15.   margin-top: 20px;
  16. }
  18. .el-slider:first-child {
  19.   margin-top: 0;
  20. }
  21. </style>
  22. <style scoped>
  23. .slider-demo-block {
  24.   display: flex;
  25.   align-items: center;
  26. }
  27. .slider-demo-block .el-slider {
  28.   margin-top: 0;
  29.   margin-left: 12px;
  30. }
  31. </style>

位置

您可以自定义 Tooltip 提示的位置。

Slider 滑块 - 图5

  1. <template>
  2.   <div class="slider-demo-block">
  3.     <el-slider v-model="value1" />
  4.   </div>
  5.   <div class="slider-demo-block">
  6.     <el-slider v-model="value2" placement="bottom" />
  7.   </div>
  8.   <div class="slider-demo-block">
  9.     <el-slider v-model="value3" placement="right" />
  10.   </div>
  11.   <div class="slider-demo-block">
  12.     <el-slider v-model="value4" placement="left" />
  13.   </div>
  14. </template>
  16. <script lang="ts" setup>
  17. import { ref } from 'vue'
  19. const value1 = ref(0)
  20. const value2 = ref(0)
  21. const value3 = ref(0)
  22. const value4 = ref(0)
  23. </script>
  24. <style scoped>
  25. .slider-demo-block {
  26.   display: flex;
  27.   align-items: center;
  28. }
  29. .slider-demo-block .el-slider {
  30.   margin-top: 0;
  31.   margin-left: 12px;
  32. }
  33. </style>

范围选择

支持选择某一数值范围

配置 range 属性以激活范围选择模式，该属性的绑定值是一个数组，由最小边界值和最大边界值组成。

Slider 滑块 - 图6

  1. <template>
  2.   <div class="slider-demo-block">
  3.     <el-slider v-model="value" range show-stops :max="10" />
  4.   </div>
  5. </template>
  7. <script lang="ts" setup>
  8. import { ref } from 'vue'
  10. const value = ref([4, 8])
  11. </script>
  12. <style scoped>
  13. .slider-demo-block {
  14.   display: flex;
  15.   align-items: center;
  16. }
  17. .slider-demo-block .el-slider {
  18.   margin-top: 0;
  19.   margin-left: 12px;
  20. }
  21. </style>

垂直模式

配置 vertical 属性为 true 启用垂直模式。 在垂直模式下，必须设置 height 属性。

Slider 滑块 - 图7

  1. <template>
  2.   <div class="slider-demo-block">
  3.     <el-slider v-model="value" vertical height="200px" />
  4.   </div>
  5. </template>
  7. <script lang="ts" setup>
  8. import { ref } from 'vue'
  10. const value = ref(0)
  11. </script>
  12. <style scoped>
  13. .slider-demo-block {
  14.   display: flex;
  15.   align-items: center;
  16. }
  17. .slider-demo-block .el-slider {
  18.   margin-top: 0;
  19.   margin-left: 12px;
  20. }
  21. </style>

显示标记

设置 marks 属性可以展示标记

Slider 滑块 - 图8

  1. <template>
  2.   <div class="slider-demo-block">
  3.     <el-slider v-model="value" range :marks="marks" />
  4.   </div>
  5. </template>
  7. <script lang="ts" setup>
  8. import { reactive, ref } from 'vue'
  9. import type { CSSProperties } from 'vue'
  11. interface Mark {
  12.   style: CSSProperties
  13.   label: string
  14. }
  16. type Marks = Record<number, Mark | string>
  18. const value = ref([30, 60])
  19. const marks = reactive<Marks>({
  20.   0: '0°C',
  21.   8: '8°C',
  22.   37: '37°C',
  23.   50: {
  24.     style: {
  25.       color: '#1989FA',
  26.     },
  27.     label: '50%',
  28.   },
  29. })
  30. </script>
  31. <style scoped>
  32. .slider-demo-block {
  33.   display: flex;
  34.   align-items: center;
  35. }
  36. .slider-demo-block .el-slider {
  37.   margin-top: 0;
  38.   margin-left: 12px;
  39. }
  40. </style>

属性

属性描述类型可选值默认值
model-value / v-model选中项绑定值number—0
min最小值number—0
max最大值number—100
disabled是否禁用boolean—false
step步长number—1
show-input是否显示输入框，仅在非范围选择时有效boolean—false
show-input-controls在显示输入框的情况下，是否显示输入框的控制按钮boolean—true
size滑块的大小stringlarge / default / smalldefault
input-size输入框的大小，如果设置了 size 属性，默认值自动取 sizestringlarge / default / smalldefault
show-stops是否显示间断点boolean—false
show-tooltip是否显示提示信息boolean—true
format-tooltip格式化提示信息function(value)——
range是否开启选择范围boolean—false
vertical垂直模式boolean—false
height滑块高度，垂直模式必填string——
label屏幕阅读器标签string——
range-start-label当 range 为true时，屏幕阅读器标签开始的标记string——
range-end-label当 range 为true时，屏幕阅读器标签结尾的标记string——
format-value-text显示屏幕阅读器的 aria-valuenow 属性的格式function(value)——
debounce输入时的去抖延迟，毫秒，仅在 show-input 等于 true 时有效number—300
tooltip-classtooltip 的自定义类名string——
placementTooltip 出现的位置stringtop/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-endtop
marks标记， 对象的键类型需为 number 且对象的值必须在 [min, max]闭区间内，每个标记均可自定义样式object——
validate-event输入时是否触发表单的校验boolean-true

事件

事件名说明参数
change值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）val，新状态的值
input数据改变时触发（使用鼠标拖曳时，活动过程实时触发）val，改变后的值

源代码

组件 Slider 滑块 - 图9 • 文档 Slider 滑块 - 图10

贡献者

Slider 滑块 - 图11 三咲智子

Slider 滑块 - 图12 云游君

Slider 滑块 - 图13 jeremywu

Slider 滑块 - 图14 kooriookami

Slider 滑块 - 图15 zz

Slider 滑块 - 图16 Delyan Haralanov

Slider 滑块 - 图17 renovate[bot]

Slider 滑块 - 图18 qiang

Slider 滑块 - 图19 류한경

Slider 滑块 - 图20 bqy_fe

Slider 滑块 - 图21 opengraphica

Slider 滑块 - 图22 C.Y.Kun

Slider 滑块 - 图23 Xc

Slider 滑块 - 图24 Hefty

Slider 滑块 - 图25 blackie

Slider 滑块 - 图26 msidolphin

Slider 滑块 - 图27 spx

Slider 滑块 - 图28 Aex

Slider 滑块 - 图29 on the field of hope

Slider 滑块 - 图30 Ryan2128

Slider 滑块 - 图31 Simona

Slider 滑块 - 图32 Hades-li