Slider 滑块

通过拖动滑块在一个固定区间内进行选择。

基础用法

通过 v-model 绑定当前值。

<template>
  <ZcSlider v-model="value" />
  <ZcSlider v-model="value" show-input />
</template>
<script setup>
import { ref } from 'vue'
const value = ref(30)
</script>

范围选择

设置 range 属性开启范围选择，此时 v-model 绑定一个数组。

<template>
  <ZcSlider v-model="value" range :max="100" />
</template>
<script setup>
import { ref } from 'vue'
const value = ref([20, 60])
</script>

离散值与刻度

通过 step 设置步长，marks 设置刻度标签。

<template>
  <ZcSlider v-model="value1" :step="10" show-stops />
  <ZcSlider
    v-model="value2"
    :marks="{ 0: '0°C', 25: '25°C', 50: '50°C', 75: '75°C', 100: '100°C' }"
  />
</template>
<script setup>
import { ref } from 'vue'
const value1 = ref(30)
const value2 = ref(40)
</script>

Slider API

Props

参数	说明	类型	默认值
modelValue	绑定值	number | [number, number]	0
min	最小值	number	0
max	最大值	number	100
step	步长	number	1
disabled	是否禁用	boolean	false
vertical	是否竖向	boolean	false
showTooltip	是否显示 tooltip	boolean	true
range	是否范围选择	boolean	false
marks	刻度标签	SliderMark[]	[]
size	尺寸	'large' | 'medium' | 'small'	'medium'
showInput	是否显示输入框	boolean	false
tooltipClass	tooltip 自定义类名	string	''
height	竖向模式高度	string	''

Events

事件名	说明	回调参数
change	值改变时触发（拖动结束）	(value, oldValue)
input	数据改变时触发（拖动过程中）	(value)