qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

Range 范围选择器

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

使用指南

在 Taro 文件中引入组件

import { AtRange } from 'taro-ui-vue3'

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

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

一般用法

<template>
  <view class='panel__content'>
    <view class='example-item'>
      数值范围：{{ value[0] }}~{{ value[1] }}
    </view>
    <AtRange
      :min="30"
      :max="90"
      :value="value"
      @change="handleChange"
    />
  </view>
</template>
<script>
export default {
  name: 'AtRangePageDemo',
  data() {
    return {
      value: [50, 60],
    }
  },
  methods: {
    handleChange(val) {
      this.value = val
    }
  }
}
</script>

参数

参数说明类型可选值默认值
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