Skip to main content
Version: 2.x

Slider

滑动选择器

参考文档

类型

ComponentType<SliderProps>

示例代码

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>
)
}
}

SliderProps

参数类型默认值必填说明
minnumber0最小值
maxnumber100最大值
stepnumber1步长,取值必须大于 0,并且可被(max - min)整除
disabledbooleanfalse是否禁用
valuenumber0当前取值
colorstring"#e9e9e9"背景条的颜色(请使用 backgroundColor)
selectedColorstring"#1aad19"已选择的颜色(请使用 activeColor)
activeColorstring"#1aad19"已选择的颜色
backgroundColorstring"#e9e9e9"背景条的颜色
blockSizenumber28滑块的大小,取值范围为 12 - 28
blockColorstring"#ffffff"滑块的颜色
showValuebooleanfalse是否显示当前 value
onChangeBaseEventOrigFunction<onChangeEventDetail>完成一次拖动后触发的事件
onChangingBaseEventOrigFunction<onChangeEventDetail>拖动过程中触发的事件

API 支持度

API微信小程序百度小程序支付宝小程序字节跳动小程序H5React Native
SliderProps.min✔️✔️✔️✔️✔️✔️
SliderProps.max✔️✔️✔️✔️✔️✔️
SliderProps.step✔️✔️✔️✔️✔️✔️
SliderProps.disabled✔️✔️✔️✔️✔️✔️
SliderProps.value✔️✔️✔️✔️✔️✔️
SliderProps.color✔️✔️
SliderProps.selectedColor✔️✔️
SliderProps.activeColor✔️✔️✔️✔️✔️✔️
SliderProps.backgroundColor✔️✔️✔️✔️✔️✔️
SliderProps.blockSize✔️✔️✔️✔️✔️
SliderProps.blockColor✔️✔️✔️✔️✔️✔️
SliderProps.showValue✔️✔️✔️✔️✔️✔️
SliderProps.onChange✔️✔️✔️✔️✔️✔️
SliderProps.onChanging✔️✔️✔️✔️✔️✔️

onChangeEventDetail

API 支持度

API微信小程序百度小程序支付宝小程序字节跳动小程序H5React Native
Slider✔️✔️✔️✔️✔️✔️