Range 范围选择器

---

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

使用指南

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

import { AtRange } from 'taro-ui'

组件依赖的样式文件（仅按需引用时需要）

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

一般用法

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