uView Next
4.1.6

外观

Slider 滑动选择器

约 1230 字大约 4 分钟

2025-10-31

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

基本使用

<template>
	<un-page>
		<view class="u-page"> 
			<card title="基本使用">
				<un-slider style="width: 300px;" v-model="value1" @change="onChange"></un-slider>
			</card> 
		</view>
	</un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const value1 = ref(50)

const onChange = (value: number | number[]) => {
	console.log('slider changed:', value)
}
</script>

<style lang="scss">
.u-page {
	padding: 20px;
}
</style>

自定义范围

通过 min 和 max 属性设置滑块的最小值和最大值：

<template>
	<un-page>
		<view class="u-page"> 
			<card title="自定义范围(0—50)">
				<un-slider v-model="value2" :min="0" :max="50" @change="onChange"></un-slider>
			</card> 
		</view>
	</un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const value2 = ref(25)

const onChange = (value: number | number[]) => {
	console.log('slider changed:', value)
}
</script>

<style lang="scss">
.u-page {
	padding: 20px;
}
</style>

指定步长

通过 step 属性设置滑块的步长：

<template>
	<un-page>
		<view class="u-page"> 
			<card title="指定步长(每次步进5)">
				<un-slider v-model="value3" :step="5" @change="onChange"></un-slider>
			</card> 
		</view>
	</un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const value3 = ref(30)

const onChange = (value: number | number[]) => {
	console.log('slider changed:', value)
}
</script>

<style lang="scss">
.u-page {
	padding: 20px;
}
</style>

双滑块模式

通过设置 range 为 true 启用双滑块模式：

<template>
	<un-page>
		<view class="u-page"> 
			<card title="双滑块模式">
				<view style="padding: 20px 0;">
					<un-slider v-model="rangeValue" :max="200" :showValue="true" :range="true" @change="onChange"></un-slider>
				</view>
			</card> 
		</view>
	</un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const rangeValue = ref<number[]>([20, 80])

const onChange = (value: number | number[]) => {
	console.log('slider changed:', value)
}
</script>

<style lang="scss">
.u-page {
	padding: 20px;
}
</style>

禁止交叉的双滑块

通过设置 noCross 为 true 禁止双滑块交叉：

<template>
	<un-page>
		<view class="u-page"> 
			<card title="禁止交叉的双滑块">
				<un-slider v-model="rangeValue2" :range="true" :noCross="true" @change="onChange"></un-slider>
			</card> 
		</view>
	</un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const rangeValue2 = ref<number[]>([30, 70])

const onChange = (value: number | number[]) => {
	console.log('slider changed:', value)
}
</script>

<style lang="scss">
.u-page {
	padding: 20px;
}
</style>

显示数值

通过设置 showValue 为 true 显示当前值：

<template>
	<un-page>
		<view class="u-page"> 
			<card title="显示数值">
				<view style="padding: 20px 0;">
					<un-slider v-model="value5" :showValue="true" @change="onChange"></un-slider>
				</view>
			</card> 
		</view>
	</un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const value5 = ref(40)

const onChange = (value: number | number[]) => {
	console.log('slider changed:', value)
}
</script>

<style lang="scss">
.u-page {
	padding: 20px;
}
</style>

自定义样式

可以通过 railSize、railRadius 等属性自定义样式，也可以通过插槽自定义滑块：

<template>
	<un-page>
		<view class="u-page"> 
			<card title="自定义样式">
				<un-slider v-model="value6" railSize="20px" railRadius="100px" @change="onChange"></un-slider>
				<un-slider v-model="value6" @change="onChange">
					<template #startThumb>
						<view class="custom-thumb">{{ value6 }}</view>
					</template>
				</un-slider>
			</card> 
		</view>
	</un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const value6 = ref(35)

const onChange = (value: number | number[]) => {
	console.log('slider changed:', value)
}
</script>

<style lang="scss">
.u-page {
	padding: 20px;
}

.custom-thumb {
	width: 40px;
	height: 20px;
	line-height: 20px;
	background-color: rgb(238, 219, 48);
	border-radius: 5px;
	text-align: center;
}
</style>

反向滑块

通过设置 reverse 为 true 启用反向滑块：

<template>
	<un-page>
		<view class="u-page"> 
			<card title="反向滑块">
				<un-slider v-model="value8" :reverse="true" @change="onChange"></un-slider>
			</card> 
		</view>
	</un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const value8 = ref(60)

const onChange = (value: number | number[]) => {
	console.log('slider changed:', value)
}
</script>

<style lang="scss">
.u-page {
	padding: 20px;
}
</style>

禁用状态

通过设置 disabled 为 true 禁用滑块：

<template>
	<un-page>
		<view class="u-page"> 
			<card title="禁用状态">
				<un-slider v-model="value9" :disabled="true"></un-slider>
			</card> 
		</view>
	</un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const value9 = ref(70)
</script>

<style lang="scss">
.u-page {
	padding: 20px;
}
</style>

垂直方向

通过设置 vertical 为 true 启用垂直方向：

<template>
	<un-page>
		<view class="u-page"> 
			<card title="垂直方向">
				<view class="vertical-slider">
					<un-slider v-model="value4" :vertical="true" @change="onChange"></un-slider>
					<un-slider v-model="rangeValue" :range="true" :vertical="true" @change="onChange"></un-slider>
				</view>
			</card> 
		</view>
	</un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const value4 = ref(50)
const rangeValue = ref<number[]>([20, 80])

const onChange = (value: number | number[]) => {
	console.log('slider changed:', value)
}
</script>

<style lang="scss">
.u-page {
	padding: 20px;
}

.vertical-slider {
	height: 300px;
	display: flex;
	flex-direction: row;
}
</style>

API

Props

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

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

Events

事件名说明类型
change值稳定后触发（松手/点轨道）
Function
dragStart开始拖动
Function
dragEnd结束拖动
Function

Slots

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

Copyright © 2026 uView Next