Slider
A slider picker.
Type
ComponentType<SliderProps>
Examples
- React
- Vue
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>
)
}
}
<template>
<view class="components-page">
<text>sets step</text>
<slider step="1" value="50"/>
<text>displays the current value</text>
<slider step="1" value="50" :show-value="true" />
<text>sets the minimum/maximum value</text>
<slider step="1" value="100" :show-value="true" min="50" max="200"/>
</view>
</template>
SliderProps
Property | Type | Default | Required | Description |
---|---|---|---|---|
min | number | 0 | No | The minimum value. |
max | number | 100 | No | The maximum value. |
step | number | 1 | No | The step. Its value must be greater than 0, and can be exactly divided by (max – min). |
disabled | boolean | false | No | Specifies whether to disable the component. |
value | number | 0 | No | The current value. |
color | string | "#e9e9e9" | No | The color of the background bar (Use backgroundColor). |
selectedColor | string | "#1aad19" | No | The selected color (Use activeColor). |
activeColor | string | "#1aad19" | No | The selected color. |
backgroundColor | string | "#e9e9e9" | No | The color of the background bar. |
blockSize | number | 28 | No | The size of the swiper. Its values range from 12 to 28. |
blockColor | string | "#ffffff" | No | The color of the swiper. |
showValue | boolean | false | No | Specifies whether to display the current value. |
onChange | BaseEventOrigFunction<onChangeEventDetail> | No | The event triggered after the swiper is dragged. | |
onChanging | BaseEventOrigFunction<onChangeEventDetail> | No | The event triggered during dragging of the swiper. |
Property Support
Property | WeChat Mini-Program | Baidu Smart-Program | Alipay Mini-Program | ByteDance Micro-App | H5 | React 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
API | WeChat Mini-Program | Baidu Smart-Program | Alipay Mini-Program | ByteDance Micro-App | H5 | React Native |
---|---|---|---|---|---|---|
Slider | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |