elementui滑块

ElementUI 滑块组件使用指南

ElementUI 提供了滑块（Slider）组件，用于通过滑动输入选择数值范围。以下是具体用法和常见功能示例。

基础用法

通过 v-model 绑定数据，设置 min 和 max 属性定义范围：

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

export default {
  data() {
    return {
      value: 0
    }
  }
}

离散值滑块

设置 step 属性控制步长，show-stops 显示间断点：

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

范围选择

启用 range 属性可选择范围值：

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

data() {
  return {
    value: [30, 60]
  }
}

自定义样式

通过 format-tooltip 自定义提示内容，height 设置竖向滑块高度：

<el-slider
  v-model="value"
  :format-tooltip="format"
  vertical
  height="200px">
</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>

注意事项

1. 范围选择时 v-model 应绑定数组
2. 竖向滑块需明确设置高度
3. 自定义提示内容需返回字符串
4. 移动端使用时建议增加更大的拖拽区域