slider elementui

Slider 组件概述

Element UI 的 Slider 组件是一个滑动输入条，允许用户通过拖动滑块来选择数值或范围。适用于需要精确调整数值的场景，如音量控制、价格区间筛选等。

基本用法

引入 Slider 组件后，可通过 v-model 绑定数值：

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

数据定义：

data() {
  return {
    value: 0
  }
}

自定义范围

设置 min 和 max 属性可定义滑动范围：

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

离散值模式

通过 step 属性控制步长，结合 show-stops 显示间断点：

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

范围选择

启用 range 属性可同时选择两个值：

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

数据定义：

data() {
  return {
    rangeValue: [20, 50]
  }
}

竖向模式

添加 vertical 属性可切换为竖向滑块：

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

格式化提示

使用 format-tooltip 自定义提示内容：

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

方法定义：

methods: {
  format(val) {
    return val + '%';
  }
}

禁用状态

通过 disabled 属性禁用交互：

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

事件监听

支持 change 和 input 事件：

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

方法定义：

methods: {
  handleChange(val) {
    console.log('最终值:', val);
  },
  handleInput(val) {
    console.log('实时值:', val);
  }
}

自定义样式

通过 CSS 覆盖可修改滑块颜色等样式：

.el-slider__runway {
  background-color: #e4e7ed;
}
.el-slider__bar {
  background-color: #409EFF;
}
.el-slider__button {
  border-color: #409EFF;
}

注意事项

• 范围选择时 v-model 需绑定数组
• 竖向模式需指定 height 属性
• 格式化函数需返回字符串类型