# Slider 滑动选择器

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

# 平台差异说明

# 基本使用

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

<template>
	<up-slider v-model="value"></up-slider>
</template>

<script setup>  
import { ref } from 'vue';  
  
// 响应式数据  
const value = ref(30);  
</script>

<script>
	export default {
		data() {	
			return {
				value: 30
			}
		}
	}
</script>

# 设置最大和最小值

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

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

# 设置步进值

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

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

# 禁用状态

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

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

• activeColor，设置进度条的激活部分颜色
• inactiveColor，进度条的激活部分颜色
• inactiveColor，进度条的背景颜色
• blockColor，滑块的背景颜色
• blockStyle，用户对滑块的自定义样式(颜色)

<template>
	<up-slider v-model="value" activeColor="#3c9cff" inactiveColor="#c0c4cc">
	</up-slider>
</template>

<script setup>  
import { ref } from 'vue';  
  
// 响应式数据  
const value = ref(30);  
</script>

<script>
	export default {
		data() {	
			return {
				value: 30
			}
		}
	}
</script>

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

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

其他更多参数详见底部API

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

# 右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码

 github  gitee

# API

# Props

# Slider Events