该组件一般用于表单中,手动选择一个区间范围的场景。
说明
该组件在H5,微信小程序和APP-VUE等平台上使用了WXS技术,在NVUE平台使用了BindingX技术, 故在滑动过程中可以获得细腻流畅的跟随效果。
#平台差异说明
| App(vue) | App(nvue) | H5 | 小程序 | 
|---|---|---|---|
| √ | √ | √ | √ | 
#基本使用
需要通过v-model绑定一个值,来初始化滑块的选择值(0到100之间),这个值是双向绑定的,您可以通过这个值,实时地得知内部的滑动结果。
<template><u-slider v-model="value"></u-slider>
</template><script>export default {data() {	return {value: 30}}}
</script>
copy
#设置最大和最小值
通过min和max,可以设置滑块所能选择的最大和最小值
<u-slider v-model="value" min="30" max="80"></u-slider>
copy
#设置步进值
通过step参数设置步进值,这个步进值为每次跳变的值,具体表现请见示例。
提示
需要注意的是,这个step必须要被max值整除,否则会出现无法无法滑动到最大值的情况
<u-slider v-model="value" step="20" min="30" max="100"></u-slider>
copy
#禁用状态
<u-slider v-model="value" disabled></u-slider>
copy
#自定义按钮的内容和样式
- activeColor,设置进度条的激活部分颜色
- inactiveColor,进度条的激活部分颜色
- inactiveColor,进度条的背景颜色
- blockColor,滑块的背景颜色
- blockStyle,用户对滑块的自定义样式(颜色)
<template><u-slider v-model="value" activeColor="#3c9cff" inactiveColor="#c0c4cc"></u-slider>
</template><script>export default {data() {	return {value: 30}}}
</script>
copy
#自定义滑动选择器整体的样式
- 通过inactive-color配置底部滑动条背景颜色
- 通过active-color配置底部选择部分的背景颜色
- 通过block-width配置滑块宽度(高等于宽)
- 通过block-color配置滑动按钮按钮的颜色
- 通过height配置滑块条高度,单位rpx
其他更多参数详见底部API
<u-slider v-model="value" block-width="40" block-color="red"></u-slider>