title: Slider
sidebar_label: 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
| 参数 |
类型 |
默认值 |
必填 |
说明 |
| min |
number |
0 |
否 |
最小值 |
| max |
number |
100 |
否 |
最大值 |
| step |
number |
1 |
否 |
步长,取值必须大于 0,并且可被(max - min)整除 |
| disabled |
boolean |
false |
否 |
是否禁用 |
| value |
number |
0 |
否 |
当前取值 |
| color |
string |
"#e9e9e9" |
否 |
背景条的颜色(请使用 backgroundColor) |
| selectedColor |
string |
"#1aad19" |
否 |
已选择的颜色(请使用 activeColor) |
| activeColor |
string |
"#1aad19" |
否 |
已选择的颜色 |
| backgroundColor |
string |
"#e9e9e9" |
否 |
背景条的颜色 |
| blockSize |
number |
28 |
否 |
滑块的大小,取值范围为 12 - 28 |
| blockColor |
string |
"#ffffff" |
否 |
滑块的颜色 |
| showValue |
boolean |
false |
否 |
是否显示当前 value |
| onChange |
BaseEventOrigFunction<onChangeEventDetail> |
|
否 |
完成一次拖动后触发的事件 |
| onChanging |
BaseEventOrigFunction<onChangeEventDetail> |
|
否 |
拖动过程中触发的事件 |
API 支持度
| API |
微信小程序 |
百度小程序 |
支付宝小程序 |
字节跳动小程序 |
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 支持度
| API |
微信小程序 |
百度小程序 |
支付宝小程序 |
字节跳动小程序 |
H5 |
React Native |
| Slider |
✔️ |
✔️ |
✔️ |
✔️ |
✔️ |
✔️ |