Range 范围选择器


范围选择器,允许用户在一个区间中选择特定值

使用指南

Taro-UI 版本需要在 v1.5.0 以上,在 Taro 文件中引入组件

  1. import { AtRange } from 'taro-ui'

组件依赖的样式文件(仅按需引用时需要)

  1. @import "~taro-ui/dist/style/components/range.scss";

一般用法

  1. import Taro from '@tarojs/taro'
    import { View } from '@tarojs/components'
    import { AtRange,AtToast } from 'taro-ui'
    export default class Index extends Taro.Component {
    constructor () {
    super(...arguments)
    this.state = {
    isOpened: false,
    text: '',
    }
    }
    handleChange (value) {
    this.setState({
    isOpened: true,
    text: `${value[0]}~${value[1]}`
    })
    }
    render () {
    return (
    <View>
    <AtToast
    text={this.state.text}
    isOpened={this.state.isOpened}
    />
    <AtRange
    value={[20, 60]}
    min={0}
    max={100}
    onChange={this.handleChange.bind(this)}
    />
    </View>
    )
    }
    }

参数

参数说明类型可选值默认值
sliderStyle滑块样式Object or String--
railStyle未选中部分滑动条的样式Object or String--
trackStyle选中部分滑动条的样式Object or String--
value当前取值Array-[0, 0]
min最小值Number-0
max最大值Number-100
blockSize滑块大小Number-28
disabled是否禁用Boolean-false

事件

事件名称说明返回参数
onChange当 Slider 的值发生改变时,会触发 onChange 事件,并把改变后的值作为参数传入。(value: []) => void
onAfterChange与 onTouchEnd 触发时机一致,把当前值作为参数传入。(value: []) => void

Range范围选择器 - 图1