跳到主要内容
版本:1.x

Slider

滑动选择器

属性

属性名类型默认值说明
minNumber0最小值
maxNumber100最大值
stepNumber1步长,取值必须大于 0,并且可被(max - min)整除
disabledBooleanfalse是否禁用
valueNumber0当前取值
colorColor#e9e9e9背景条的颜色(请使用 backgroundColor)
selectedColorColor#1aad19已选择的颜色(请使用 activeColor)
activeColorColor#1aad19已选择的颜色
backgroundColorColor#e9e9e9背景条的颜色
blockSizeNumber28滑块的大小,取值范围为 12 - 28
blockColorColor#ffffff滑块的颜色
showValueBooleanfalse是否显示当前 value
onChangeEventHandle完成一次拖动后触发的事件
onChangingEventHandle拖动过程中触发的事件

各端支持度

属性微信小程序H5ReactNative百度小程序支付宝小程序抖音小程序
min
max
step
disabled
value
colorx
selectedColorx
activeColor
backgroundColor
blockSizex
blockColor
showValue
onChange
onChanging
示例:
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Slider } from '@tarojs/components'

export default class PageView extends Component {
constructor() {
super(...arguments)
}

render() {
return (
<View className='components-page'>
<Text>设置 step</Text>
<Slider step={1} value={50}/>
<Text>显示当前 value</Text>
<Slider step={1} value={50} showValue/>
<Text>设置最小/最大值</Text>
<Slider step={1} value={100} showValue min={50} max={200}/>
</View>
)
}
}