# Slider 滑动选择器 3.6.4

适用于选择单个数值或区间范围的场景，支持横向/纵向、反向、禁用、双滑块区间、防交叉、显示数值等能力。

# 平台差异说明

App（vue）	App（nvue）	H5	小程序
√	X	√	√

# 基本用法（单滑块）

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

<script>
export default {
	data() {
		return { value: 30 }
	}
}
</script>
✅ Copy success!

# 区间选择（双滑块）

<u-slider v-model="range" :range="true" />

<script>
export default {
	data() {
		return { range: [20, 60] }
	}
}
</script>
✅ Copy success!

# 最小/最大值与步长

<u-slider v-model="value" :min="10" :max="200" :step="5" />
✅ Copy success!

说明：内部会按步长对值进行就近取整，随后裁剪到区间 [min, max] 内。

# 禁用与只读

<u-slider v-model="value" disabled />
<u-slider v-model="value" readonly />
✅ Copy success!

# 竖向与反向

<u-slider v-model="value" vertical style="height: 200px" />
<u-slider v-model="value" :reverse="true" />
✅ Copy success!

# 防交叉（区间）

<u-slider v-model="range" :range="true" :noCross="true" />
✅ Copy success!

# 显示数值

<u-slider v-model="value" :showValue="true" />
<u-slider v-model="range" :range="true" :showValue="true" />
✅ Copy success!

# 自定义尺寸与颜色

轨道尺寸与圆角：railSize、railRadius
轨道颜色：railColor；已选轨道颜色：trackColor
滑块尺寸/颜色/圆角/边框：thumbSize、thumbColor、thumbRadius、thumbBorder
主尺寸（横向为高度、纵向为宽度）：size

<u-slider
	v-model="value"
	railSize="6px"
	railRadius="3px"
	trackColor="#1677ff"
	thumbSize="22px"
	thumbColor="#fff"
	thumbBorder="3px solid #1677ff"
/>
✅ Copy success!

# 槽位

startThumb：自定义起始滑块内容
endThumb：自定义结束滑块内容（区间模式）

<u-slider v-model="range" :range="true">
	<template #startThumb>
		<view class="custom-thumb" />
	</template>
	<template #endThumb>
		<view class="custom-thumb" />
	</template>
</u-slider>
✅ Copy success!

# API

# Props

参数	说明	类型	默认值
v-model	双向绑定值（Number 或 [start, end]）	Number \| Array	0
min	最小值	Number	0
max	最大值	Number	100
step	步长，>0	Number	1
range	是否启用区间模式	Boolean	false
disabled	是否禁用	Boolean	false
readonly	是否只读	Boolean	false
reverse	是否反向	Boolean	false
noCross	区间是否禁止交叉	Boolean	false
vertical	是否竖向	Boolean	false
size	主尺寸（纵向为宽度/横向为高度）	String	24px
railColor	轨道颜色	String	rgba(0, 0, 0, 0.1)
railRadius	轨道圆角	String	2px
railSize	轨道厚度	String	4px
trackColor	已选轨道颜色	String	#1677ff
thumbSize	滑块尺寸	String	20px
thumbColor	滑块背景色	String	#ffffff
thumbBorder	滑块边框	String	3px solid #1677ff
thumbRadius	滑块圆角	String	50%
showValue	是否显示当前值	Boolean	false

说明：数值类 props 会在内部做安全转换与边界裁剪。

# Events

事件名	说明	回调参数
change	值稳定后触发（松手/点轨道）	当前值（Number \| Array）
dragStart	开始拖动	当前值（Number \| Array）
dragEnd	结束拖动	当前值（Number \| Array）

# Slots

名称	说明
startThumb	起始滑块内容
endThumb	结束滑块内容（区间模式）

← Switch 开关选择器 Album 相册 →