当前位置：首页 > 前端教程

slider elementui

2026-03-05 21:17:45前端教程

Slider 组件的基本用法

Element UI 的 Slider 组件用于通过拖动滑块在一个固定范围内选择值。基本用法如下：

<template>
  <el-slider v-model="value"></el-slider>
</template>

<script>
export default {
  data() {
    return {
      value: 0
    }
  }
}
</script>

自定义范围和步长

可以通过 min 和 max 属性设置滑块的最小和最大值，step 属性控制步长：

<el-slider 
  v-model="value"
  :min="20"
  :max="80"
  :step="5">
</el-slider>

禁用状态

添加 disabled 属性可将滑块设置为禁用状态：

<el-slider v-model="value" disabled></el-slider>

显示间断点

设置 show-stops 属性可以显示间断点：

<el-slider 
  v-model="value"
  :step="10"
  show-stops>
</el-slider>

显示输入框

添加 show-input 属性可显示输入框，直接输入数值：

<el-slider v-model="value" show-input></el-slider>

范围选择

使用 range 属性可开启范围选择模式，v-model 绑定值为数组：

<el-slider 
  v-model="value"
  range
  :min="0"
  :max="100">
</el-slider>

自定义滑块样式

通过 slider-style 属性可以自定义滑块的样式：

<el-slider 
  v-model="value"
  :slider-style="{ backgroundColor: '#409EFF' }">
</el-slider>

格式化提示内容

使用 format-tooltip 属性可以自定义提示内容的显示格式：

<el-slider 
  v-model="value"
  :format-tooltip="formatTooltip">
</el-slider>

<script>
export default {
  methods: {
    formatTooltip(val) {
      return val + '%'
    }
  }
}
</script>

垂直模式

设置 vertical 属性可以将滑块显示为垂直方向：

<el-slider 
  v-model="value"
  vertical
  height="200px">
</el-slider>

事件监听

Slider 组件提供了 change 和 input 事件，可以监听值的变化：

<el-slider 
  v-model="value"
  @change="handleChange"
  @input="handleInput">
</el-slider>

<script>
export default {
  methods: {
    handleChange(val) {
      console.log('值改变:', val)
    },
    handleInput(val) {
      console.log('输入中:', val)
    }
  }
}
</script>

自定义标记点

通过 marks 属性可以在滑块上添加自定义标记点：

<el-slider 
  v-model="value"
  :marks="marks">
</el-slider>

<script>
export default {
  data() {
    return {
      marks: {
        0: '0°C',
        20: '20°C',
        50: '50°C',
        100: '100°C'
      }
    }
  }
}
</script>

自定义滑块按钮

使用 slider-button 插槽可以自定义滑块按钮：

slider elementui

<el-slider v-model="value">
  <template #slider-button="{ value }">
    <div class="custom-button">{{ value }}</div>
  </template>
</el-slider>

<style>
.custom-button {
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  background-color: #409EFF;
  color: #fff;
  border-radius: 50%;
}
</style>