Slider - 《Taro 文档帮助手册教程》

sidebar_label: Slider
Type
Examples
SliderProps
- Property Support
- onChangeEventDetail
API Support

title: Slider

sidebar_label: Slider

A slider picker.

Reference

Type

ComponentType<SliderProps>

Examples

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

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