Slider 滑块

用于在一个固定区间数值范围内通过拖动滑块进行持续调节或区间选择的控件。

---

代码示例

1. 基础用法 (Basic)

使用 v-model 绑定滑动数值，滑动轨道调节。

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

<script setup>
import { ref } from 'vue'
const value = ref(30)
</script>

---

2. 显示浮动气泡提示 (Tooltip)

设置 show-value 在拖拽按键上方显示当前分值的实时浮动提示气泡。

<template>
  <mu-slider v-model="value" show-value />
</template>

---

3. 设定步长 (Step)

设置 step 属性控制拖拽改变时的增减步长跨度（如 step="10"）。

<template>
  <mu-slider v-model="value" :step="10" show-value />
</template>

---

4. 自定义最小值与最大值 (Min & Max)

使用 min 与 max 属性限制滑块允许拖动的范围界限。

<template>
  <mu-slider v-model="value" :min="20" :max="80" show-value />
</template>

---

5. 禁用状态 (Disabled)

设置 disabled 禁止用户拖拽交互。

<template>
  <mu-slider :model-value="40" disabled />
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model	当前滑块选择的值	Number	-	0
min	允许选择的最小值	Number	-	0
max	允许选择的最大值	Number	-	100
step	每次拖动的步长	Number	-	1
showValue	是否在按键上方展示浮动气泡数值	Boolean	true | false	false
showValueText	是否在最右侧展示数值文本	Boolean	true | false	true
disabled	是否禁用拖拽	Boolean	true | false	false

---

事件说明 (Events)

事件名	说明	回调参数
change	拖动改变数值时触发	(value: Number)
update:modelValue	v-model 双向绑定更新	(value: Number)
drag-start	开始拖拽按键时触发	(value: Number)
drag-end	结束拖拽释放按键时触发	(value: Number)