uniapp中uview组件库丰富的Slider 滑动选择器的使用方法

<template>
	<u-slider v-model="value"></u-slider>
</template>
	
<script>
	export default {
		data() {	
			return {
				value: 30
			}
		}
	}
</script>

#设置最大和最小值

通过min和max，可以设置滑块所能选择的最大和最小值

复制代码

<u-slider v-model="value" min="30" max="80"></u-slider>

#设置步进值

通过step参数设置步进值，这个步进值为每次跳变的值，具体表现请见示例。

提示

需要注意的是，这个step必须要被max值整除，否则会出现无法无法滑动到最大值的情况

复制代码

<u-slider v-model="value" step="20" min="30" max="100"></u-slider>

#禁用状态

复制代码

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

#自定义按钮的内容和样式

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>

#自定义滑动选择器整体的样式

通过inactive-color配置底部滑动条背景颜色
通过active-color配置底部选择部分的背景颜色
通过block-width配置滑块宽度(高等于宽)
通过block-color配置滑动按钮按钮的颜色
通过height配置滑块条高度，单位rpx

其他更多参数详见底部API

复制代码

<u-slider v-model="value" block-width="40" block-color="red"></u-slider>

#此页面源代码地址

页面源码地址
编辑 github 编辑 gitee

#API

#Props

参数	说明	类型	默认值	可选值
value	双向绑定滑块选择值	String \| Number	0	-
blockSize	滑块的大小	String \| Number	18	12 - 28
min	可选的最小值(0-100之间)	String \| Number	1	-
max	可选的最大值(0-100之间)	String \| Number	100	-
step	选择的步长	String \| Number	1	-
activeColor	进度条的激活部分颜色	String	#2979ff	-
inactiveColor	进度条的背景颜色	String	#c0c4cc	-
blockColor	滑块背景颜色	String	#ffffff	-
showValue	是否显示当前 value	Boolean	false	true
blockStyle	滑块按钮自定义样式，对象形式	Object \| String	-	-

#Slider Events

事件名	说明	回调参数
input	更新v-model的（拖动过程中）	value：当前值
changing	触发事件（拖动过程中）	value：当前值
input	更新v-model的	value：当前值
change	触发事件	value：当前值