Slider 滑动输入条

滑动输入条组件，用于通过拖拽滑块来输入数值，支持范围选择、步长设置、禁用状态等功能。

基础用法

最简单的滑动输入条，通过 v-model 绑定数值。

基础滑动条

当前值: 50

<template>
  <div class="slider-demo">
    <p>基础滑动条</p>
    <Slider v-model="value" />
    <p class="slider-value">当前值: {{ value }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Slider } from '../../../src/components/Slider';

const value = ref(50);
</script>

<style scoped>
.slider-demo {
  padding: 20px;
}

.slider-value {
  margin-top: 10px;
  color: var(--color-text-2);
}
</style>

范围设置

通过 min 和 max 属性设置滑动输入条的最小值和最大值。

范围设置 (0-200)

当前值: 100

<template>
  <div class="slider-demo">
    <p>范围设置 (0-200)</p>
    <Slider v-model="value" :min="0" :max="200" />
    <p class="slider-value">当前值: {{ value }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Slider } from '../../../src/components/Slider';

const value = ref(100);
</script>

<style scoped>
.slider-demo {
  padding: 20px;
}

.slider-value {
  margin-top: 10px;
  color: var(--color-text-2);
}
</style>

步长设置

通过 step 属性设置滑动输入条的步长，控制每次拖动的值变化量。

步长设置 (步长为 5)

当前值: 50

<template>
  <div class="slider-demo">
    <p>步长设置 (步长为 5)</p>
    <Slider v-model="value" :step="5" />
    <p class="slider-value">当前值: {{ value }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Slider } from '../../../src/components/Slider';

const value = ref(50);
</script>

<style scoped>
.slider-demo {
  padding: 20px;
}

.slider-value {
  margin-top: 10px;
  color: var(--color-text-2);
}
</style>

尺寸设置

支持 small、medium、large 三种尺寸，默认为 medium。

小号尺寸

当前值: 30

中号尺寸 (默认)

当前值: 50

大号尺寸

当前值: 70

<template>
  <div class="slider-demo">
    <div class="slider-item">
      <p>小号尺寸</p>
      <Slider v-model="smallValue" size="small" />
      <p class="slider-value">当前值: {{ smallValue }}</p>
    </div>
    
    <div class="slider-item">
      <p>中号尺寸 (默认)</p>
      <Slider v-model="mediumValue" size="medium" />
      <p class="slider-value">当前值: {{ mediumValue }}</p>
    </div>
    
    <div class="slider-item">
      <p>大号尺寸</p>
      <Slider v-model="largeValue" size="large" />
      <p class="slider-value">当前值: {{ largeValue }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Slider } from '../../../src/components/Slider';

const smallValue = ref(30);
const mediumValue = ref(50);
const largeValue = ref(70);
</script>

<style scoped>
.slider-demo {
  padding: 20px;
}

.slider-item {
  margin-bottom: 30px;
}

.slider-value {
  margin-top: 10px;
  color: var(--color-text-2);
}
</style>

显示数值

通过 showValue 属性设置是否显示当前选中的数值。

显示当前数值

50

当前值: 50

<template>
  <div class="slider-demo">
    <p>显示当前数值</p>
    <Slider v-model="value" showValue />
    <p class="slider-value">当前值: {{ value }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Slider } from '../../../src/components/Slider';

const value = ref(50);
</script>

<style scoped>
.slider-demo {
  padding: 20px;
}

.slider-value {
  margin-top: 10px;
  color: var(--color-text-2);
}
</style>

禁用状态

通过 disabled 属性设置滑动输入条为禁用状态。

禁用状态

当前值: 50

<template>
  <div class="slider-demo">
    <p>禁用状态</p>
    <Slider v-model="value" disabled />
    <p class="slider-value">当前值: {{ value }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Slider } from '../../../src/components/Slider';

const value = ref(50);
</script>

<style scoped>
.slider-demo {
  padding: 20px;
}

.slider-value {
  margin-top: 10px;
  color: var(--color-text-2);
}
</style>

带标签的滑动条

通过 label 属性为滑动输入条添加标签。

音量控制

事件监听

滑动输入条支持多种事件，可以监听用户的交互行为。

当前值: 50

拖动状态: 未拖动

API

属性

属性名	说明	类型	默认值
v-model	绑定值	Number / String	0
min	最小值	Number / String	0
max	最大值	Number / String	100
step	步长	Number / String	1
label	标签文本	String	''
disabled	是否禁用	Boolean	false
showValue	是否显示当前值	Boolean	false
size	尺寸，可选值为 small、medium、large	String	'medium'
width	宽度	String	'100%'
height	高度	String	'auto'
validate-event	是否触发验证事件	Boolean	true

事件

事件名	说明	回调参数
update:modelValue	值改变时触发	value: 当前值
input	输入时触发	value: 当前值
change	值改变时触发	value: 当前值
drag-start	开始拖动时触发	value: 当前值
drag-end	结束拖动时触发	value: 当前值
validate-event	验证时触发	value: 当前值

兼容性

支持现代浏览器和 IE11+，移动端支持触摸事件。