跳到主要内容
版本:4.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当前取值
defaultValuestring设置 React 非受控状态下的初始取值
colorstring"#e9e9e9"背景条的颜色(请使用 backgroundColor)
selectedColorstring"#1aad19"已选择的颜色(请使用 activeColor)
activeColorstring"#1aad19"已选择的颜色
backgroundColorstring"#e9e9e9"背景条的颜色
blockSizenumber28滑块的大小,取值范围为 12 - 28
blockColorstring"#ffffff"滑块的颜色
showValuebooleanfalse是否显示当前 value
namestring组件名字,用于表单提交获取数据。
trackSizestring4轨道线条高度。
handleSizestring22滑块大小。
handleColorstring滑块填充色,同 CSS 色值。
ariaLabelstring无障碍访问,(属性)元素的额外描述
onChangeCommonEventFunction<onChangeEventDetail>完成一次拖动后触发的事件
onChangingCommonEventFunction<onChangeEventDetail>拖动过程中触发的事件

API 支持度

API微信小程序百度小程序支付宝小程序抖音小程序QQ 小程序京东小程序H5React NativeHarmonyHarmony hybrid
SliderProps.min✔️✔️✔️✔️✔️✔️✔️✔️✔️
SliderProps.max✔️✔️✔️✔️✔️✔️✔️✔️✔️
SliderProps.step✔️✔️✔️✔️✔️✔️✔️✔️✔️
SliderProps.disabled✔️✔️✔️✔️✔️✔️✔️✔️✔️
SliderProps.value✔️✔️✔️✔️✔️✔️✔️✔️✔️
SliderProps.defaultValue✔️✔️✔️✔️✔️✔️✔️✔️✔️
SliderProps.color✔️✔️✔️✔️
SliderProps.selectedColor✔️✔️✔️✔️
SliderProps.activeColor✔️✔️✔️✔️✔️✔️✔️✔️✔️
SliderProps.backgroundColor✔️✔️✔️✔️✔️✔️✔️✔️✔️
SliderProps.blockSize✔️✔️✔️✔️✔️✔️✔️
SliderProps.blockColor✔️✔️✔️✔️✔️✔️✔️✔️
SliderProps.showValue✔️✔️✔️✔️✔️✔️✔️✔️✔️
SliderProps.name✔️
SliderProps.trackSize✔️
SliderProps.handleSize✔️
SliderProps.handleColor✔️
SliderProps.ariaLabel✔️
SliderProps.onChange✔️✔️✔️✔️✔️✔️✔️✔️✔️
SliderProps.onChanging✔️✔️✔️✔️✔️✔️✔️✔️✔️

onChangeEventDetail