滑块（Slider）

Element-UI 的滑块组件用于在一个固定区间内通过拖动滑块选择值。滑块组件提供了丰富的属性和事件，可以实现精确的用户输入和自定义显示。

提示

滑块（Slider）官方文档：https://element.eleme.cn/#/zh-CN/component/slider (opens new window)

1. 基本用法

基本语法：在 Vue 组件中使用 <el-slider> 标签创建一个滑块。通过 v-model 绑定滑块的值。

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

<script>
export default {
  data() {
    return {
      sliderValue: 0 // 滑块的初始值
    };
  }
};
</script>

• v-model 绑定：滑块的值通过 v-model 与 sliderValue 绑定。当用户拖动滑块时，sliderValue 会自动更新。
• 默认范围：在上面的例子中，滑块的默认范围是 0 到 100。

Slider 属性

参数	说明	类型	可选值	默认值
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
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	—	—
marks	标记，key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标记可以单独设置样式	object	—	—

Slider 事件

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

2. 常见滑块示例

基础滑块

通过 v-model 绑定值来实时更新滑块位置。

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

<script>
export default {
  data() {
    return {
      sliderValue: 0 // 滑块的初始值
    };
  }
};
</script>

• 基本使用：用户可以通过拖动滑块改变其值，sliderValue 将自动更新为滑块的当前值。
• 

带输入框的滑块

使用 show-input 属性显示滑块值的输入框，允许用户直接输入数值。

<template>
  <el-slider v-model="sliderValue" :min="0" :max="100" show-input></el-slider>
</template>

• 输入框：通过 show-input 属性启用，用户可以在输入框中直接输入数值来设置滑块的值。
• 

范围选择滑块

通过 range 属性启用范围选择模式，允许用户选择一个值的范围。

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

<script>
export default {
  data() {
    return {
      sliderRange: [20, 50] // 范围选择的初始值
    };
  }
};
</script>

• 范围选择：通过 range 属性启用，sliderRange 数组将存储用户选择的最小值和最大值。
• 

显示间断点的滑块

使用 show-stops 属性显示滑块的间断点，帮助用户更准确地选择值。

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

• 间断点：通过 show-stops 属性启用，间断点在滑块的每个步长位置显示。
• 

竖向模式的滑块

通过 vertical 属性设置滑块为竖向模式，并指定 height 属性。

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

• 竖向模式：通过 vertical 属性启用，滑块在垂直方向上显示，并需要设置 height 属性来定义滑块的高度。
• 

带标记的滑块

使用 marks 属性为滑块添加标记，标记可以显示在滑块的特定位置上。

<template>
  <el-slider
    v-model="sliderValue"
    :marks="{
      0: '0%',
      20: '20%',
      50: '50%',
      80: '80%',
      100: {
        style: { color: '#f50' },
        label: '100%'
      }
    }"
  ></el-slider>
</template>

• 标记：通过 marks 属性添加，marks 是一个对象，键为标记位置的数值，值为标记的显示内容或自定义样式的对象。
• 

3. 事件处理示例

监听值变化事件

使用 change 和 input 事件监听滑块值的变化。

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

<script>
export default {
  data() {
    return {
      sliderValue: 0 // 滑块的初始值
    };
  },
  methods: {
    handleChange(value) {
      console.log('滑块值改变为:', value);
    },
    handleInput(value) {
      console.log('滑块值正在改变:', value);
    }
  }
};
</script>

• 事件监听：通过 change 事件监听滑块值在用户松开鼠标后的变化，通过 input 事件监听滑块值在拖动过程中的变化。

总结

• 多样化的配置选项：通过 min、max、step、range 等属性可以自定义滑块的范围和行为。
• 灵活的事件处理：支持 change 和 input 事件，允许开发者在滑块值变化时进行自定义处理。
• 丰富的样式和布局：通过 vertical、show-stops、marks 等属性可以自定义滑块的显示样式和方向。