title: Slider

sidebar_label: Slider

滑动选择器

支持情况：Slider - 图1 Slider - 图2 Slider - 图3 Slider - 图4 Slider - 图5 Slider - 图6 Slider - 图7

参考文档

类型

  1. ComponentType<SliderProps>

示例代码

import Tabs from ‘@theme/Tabs’ import TabItem from ‘@theme/TabItem’

tsx 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> ) } } html <template> <view class="components-page"> <text>设置 step</text> <slider step="1" value="50"/> <text>显示当前 value</text> <slider step="1" value="50" :show-value="true" /> <text>设置最小/最大值</text> <slider step="1" value="100" :show-value="true" min="50" max="200"/> </view> </template>

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 CommonEventFunction<onChangeEventDetail> 否 完成一次拖动后触发的事件
onChanging CommonEventFunction<onChangeEventDetail> 否 拖动过程中触发的事件

API 支持度

API 微信小程序 百度小程序 支付宝小程序 字节跳动小程序 H5 React Native Harmony
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