Slider 滑动条

---

允许用户在一个区间中选择特定值

使用指南

在 Taro 文件中引入组件

import { AtSlider } from 'taro-ui'

组件依赖的样式文件（仅按需引用时需要）

@import "~taro-ui/dist/style/components/slider.scss";

一般用法

<AtSlider></AtSlider>

传入当前值

<AtSlider value={50}></AtSlider>

设置步长

取值必须大于 0，并且可被(max - min)整除

<AtSlider step={2}></AtSlider>

设置取值范围

<AtSlider min={10} max={60}></AtSlider>

自定义样式

<AtSlider step={1} value={50} activeColor='#4285F4' backgroundColor='#BDBDBD' blockColor='#4285F4' blockSize={24}></AtSlider>

禁用状态

<AtSlider step={1} value={50} showValue disabled></AtSlider>

AtSlider 参数

参数	说明	类型	可选值	默认值
min	最小值	Number	-	0
max	最大值	Number	-	100
step	步长，取值必须大于0，并且可被 max - min 整除	Number	-	1
disabled	是否禁用	Boolean	-	false
value	当前取值	Number	-	0
activeColor	已选择的颜色	Color	-	#6190e8
backgroundColor	背景条的颜色	Color	-	#e9e9e9
blockSize	滑块的大小，取值范围为 12-28	Number	-	28
blockColor	滑块的颜色	Color	-	#ffffff
showValue	是否显示当前的 Value	Boolean	-	false

AtSlider 事件

事件名称	说明	返回参数
onChange	完成一次拖动后触发的事件，event.detail = {'{ value: value }'}	value
onChanging	拖动过程中触发的事件，event.detail = {'{ value: value }'}	value