# Slider 滑动选择器

该组件一般用于表单中，手动选择一个区间范围的场景。

说明

该组件在H5，微信小程序和APP-VUE等平台上使用了WXS技术，在NVUE平台使用了BindingX技术， 故在滑动过程中可以获得细腻流畅的跟随效果。

# 平台差异说明

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

# 基本使用

需要通过v-model绑定一个值，来初始化滑块的选择值(0到100之间)，这个值是双向绑定的，您可以通过这个值，实时地得知内部的滑动结果。

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

# 设置最大和最小值

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

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

# 设置步进值

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

提示

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

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

# 禁用状态

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

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

  • activeColor，设置进度条的激活部分颜色
  • inactiveColor，进度条的激活部分颜色
  • inactiveColor，进度条的背景颜色
  • blockColor，滑块的背景颜色
  • blockStyle，用户对滑块的自定义样式(颜色)
<template>
	<zx-slider v-model="value" activeColor="#3c9cff" inactiveColor="#c0c4cc">
	
	</zx-slider>
</template>
	
<script>
	export default {
		data() {	
			return {
				value: 30
			}
		}
	}
</script>

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

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

其他更多参数详见底部API

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

# 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：当前值