uv-ui

# Slider 滑动选择器

✈

组件名：uv-slider

点击下载&安装 (opens new window)

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

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

# 平台兼容性

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

# 基本使用

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

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

# 设置最大和最小值

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

<template>
	<uv-slider v-model="value" min="30" max="80"></uv-slider>
</template>
<script>
	export default {
		data() {
			return {
				value: 40
			}
		}
	}
</script>

# 设置步进值

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

注意

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

<template>
	<uv-slider v-model="value" step="10" min="30" max="100"></uv-slider>
</template>
<script>
	export default {
		data() {
			return {
				value: 40
			}
		}
	}
</script>

# 禁用状态

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

# 设置滑块和线条的样式

  • 通过block-size属性 设置滑块大小（高等于宽）
  • 通过block-color属性 设置滑动按钮的颜色
  • 通过activeColor属性 设置滑块左侧已选择部分的线条颜色
  • 通过backgroundColor属性 设置滑块右侧背景条的颜色
<template>
	<uv-slider 
		v-model="value" 
		block-size="30" 
		block-color="red" 
		backgroundColor="pink" 
		activeColor="blue">
	</uv-slider>
</template>
<script>
	export default {
		data() {
			return {
				value: 30
			}
		}
	}
</script>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# Slider Props

参数 说明 类型 默认值 可选值
value / v-model 双向绑定滑块选择值 String | Number 0 -
min 可选的最小值(0-100之间) String | Number 1 -
max 可选的最大值(0-100之间) String | Number 100 -
step 选择的步长 String | Number 1 -
activeColor 滑块左侧已选择部分的线条颜色 String #2979ff -
backgroundColor 滑块右侧背景条的颜色 String #c0c4cc -
block-size 滑块的大小，取值范围为 12 - 28 String | Number 18 12 - 28
block-color 滑块的颜色 String #ffffff -
show-value 是否显示当前 value Boolean false true | false
blockStyle 滑块按钮自定义样式 Object | String - -
customStyle 自定义外部样式 Object - -

# Slider Events

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

← List 列表 →