外观
Slider 滑动选择器
约 1350 字大约 5 分钟
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 | 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 | 值稳定后触发(松手/点轨道) | Function |
| dragStart | 开始拖动 | Function |
| dragEnd | 结束拖动 | Function |
Slots
| 名称 | 说明 |
|---|---|
| startThumb | 起始滑块内容 |
| endThumb | 结束滑块内容(区间模式) |
Scss 变量
| 变量名 | 默认值 | 说明 |
|---|---|---|
| $un-slider-thumb-border | 3px solid $color-primary | 滑块边框 |
| $un-slider-thumb-box-shadow | 0 1px 4px rgba(0, 0, 0, .3) | 滑块阴影 |
| $un-slider-value-top | -20px | 数值顶部位置 |
| $un-slider-value-padding | 2px 6px | 数值内边距 |
| $un-slider-value-bg-color | rgba(0,0,0,0.6) | 数值背景颜色 |
| $un-slider-value-font-size | $text-xs | 数值字体大小 |
提示
组件内部默认使用 scss 变量,如需修改,请查看 scss 变量使用 文档
