Slider

A slider picker.

Reference

Type

ComponentType<SliderProps>

Examples

React

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>
    )
  }
}

Vue

<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	✔️	✔️	✔️	✔️	✔️	✔️