Skip to main content
Version: 3.x

Slider

A slider picker.

Reference

Type

ComponentType<SliderProps>

Examples

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

render() {
return (
<View className='components-page'>
<Text>sets step</Text>
<Slider step={1} value={50}/>
<Text>displays the current value</Text>
<Slider step={1} value={50} showValue/>
<Text>sets the minimum/maximum value</Text>
<Slider step={1} value={100} showValue min={50} max={200}/>
</View>
)
}
}

SliderProps

PropertyTypeDefaultRequiredDescription
minnumber0NoThe minimum value.
maxnumber100NoThe maximum value.
stepnumber1NoThe step. Its value must be greater than 0, and can be exactly divided by (max – min).
disabledbooleanfalseNoSpecifies whether to disable the component.
valuenumber0NoThe current value.
colorstring"#e9e9e9"NoThe color of the background bar (Use backgroundColor).
selectedColorstring"#1aad19"NoThe selected color (Use activeColor).
activeColorstring"#1aad19"NoThe selected color.
backgroundColorstring"#e9e9e9"NoThe color of the background bar.
blockSizenumber28NoThe size of the swiper. Its values range from 12 to 28.
blockColorstring"#ffffff"NoThe color of the swiper.
showValuebooleanfalseNoSpecifies whether to display the current value.
onChangeBaseEventOrigFunction<onChangeEventDetail>NoThe event triggered after the swiper is dragged.
onChangingBaseEventOrigFunction<onChangeEventDetail>NoThe event triggered during dragging of the swiper.

Property Support

PropertyWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramByteDance Micro-AppH5React 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 Support

APIWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramByteDance Micro-AppH5React Native
Slider✔️✔️✔️✔️✔️✔️