Slider 滑动条


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

使用指南

在 Taro 文件中引入组件

  1. import { AtSlider } from 'taro-ui'

组件依赖的样式文件(仅按需引用时需要)

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

一般用法

  1. <AtSlider></AtSlider>

传入当前值

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

设置步长

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

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

设置取值范围

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

自定义样式

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

禁用状态

  1. <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-28Number-28
blockColor滑块的颜色Color-#ffffff
showValue是否显示当前的 ValueBoolean-false

AtSlider 事件

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

Slider滑动条 - 图1