Range 区间选择 3.0.0

用户可通过滑动选定一个区间，组件返回这个区间值；支持单、双滑块模式，有step和无step模式等。

使用说明

引用方式

import { Range } from '$yo-component';

// 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
// 你仍然可以通过下面这种方式来引用
import Range from 'yo3/component/range';

双滑块用法

由于组件是受控驱动的，所以你必须自己来控制更新，组件会将应该更新到的状态通过回调参数 value 传递出来，你需要通过传递 state 数据给 value 属性（如 value={this.state.value}），并在 onChange 函数中对 state（如 state.value）进行更新,即调用 this.setState({ value: value })。

import Range from 'component';
class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: [200, 300]
    };
  }

  render() {
    return (
      <Range
        max={500}
        min={100}
        step={100}
        value={this.state.value}
        onChange={value => this.setState({ value })}
      />
    )
  }
}

单滑块用法

// this.state = { value: 200 };

<Range
  max={500}
  min={100}
  step={100}
  isSingle={true}
  value={this.state.value}
  onChange={value => this.setState({ value })}
/>

扩展用法

自定义标签，支持 JSX：

scaleFormat(value, index) {
  const text = ['￥0', '￥150', '￥300', '￥500', '￥800', '不限'];
  return (
    <div key={`tick${index}`}>
      <span>
        {text[index]}
      </span>
      <i className="yo-ico">{'\uf083'}</i>
    </div>
  );
}

<Range
  ref="range"
  max={750}
  min={0}
  step={150}
  value={this.state.value}
  scaleFormat={this.scaleFormat}
  onChange={value => { this.setState({ value }); }}
/>

扩展用法

借助 onSliderTouchMove 回调参数，可实时获取 value 值和滑块的 translateX。

在 touchMove 滑动过程中，鉴于通过 state 数据来控制滑块移动的性能极差（事件触发太过频繁），故而选择直接改变 Dom 属性，如果你想利用 touchMove 中的回调参数做一些事情，也极力推荐直接操作 Dom，下面有示范。

<span
  ref="tip"
  style={{ transform: `translateX(${this.state.translateX}px)` }}
>
<Range
  onSliderTouchMove={(val, translateX, evt, sliderIndex) => {
    const $tip = this.refs.tip,
    $tip.innerText = val[sliderIndex];
    $tip.style.transform = `translateX(${translateX[sliderIndex]}px)`;
  }}
  onChange={value => { this.setState({ value }); }}
  {...otherProps}
/>

刷新滑块位置

与 Popup 组件复合时，从 display: none 到展示时，可通过 ref 调用 resize() 来将滑块位置重置到正确的位置上，必须得在 Range 组件渲染的 Dom 有实际宽度后调用才能生效。

<Popup
  onShow={() => {
    this.refs.range.resize();
  }}
  {...otherProps}
>
  <Range
    ref="range"
    {...otherProps}
  />
</Popup>
属性

disable { Bool } #

受控属性：禁止滑块滑动，阻止touch事件。

默认值: false

max { Number } #

受控属性：滑块滑到最右边应该表示的值。

注意：有传入step属性时，必须保证 (max - min) 能被 step 整除。

默认值: 100

min { Number } #

受控属性：滑块滑到最左边应该表示的值。

step { Number } #

受控属性：滑块单方向滑动一次后的最小步长。

注意：不设置该属性，表示移动时不设步长，step 必须为一正数。

注意：step自带的小数位点影响最后返回的数字的最大小数位数。

value { Array/Number } #

受控属性：滑块初始化时默认选中的区间范围；

注意：类型提示：类型为Array，对应两个滑块的值，类型为Number，对应于1个滑块的值；

round { Number } #

受控属性：滑块在当前滑动的方向上，累积滑动多大一段距离后，才判定应该到达该方向的下一个停驻点。默认为1/4的间距，也就是如果累积滑动了1/4间距后，即到达该方向上的一下个停驻点。

默认值: 1/4

directionSensitivity { Number } #

受控属性：反向移动多少"像素"算作方向改变，防止手指微动时导致方向改变，近而导致由于微动而很难移动到目标位置。

默认值: 6

isSingle { Bool } #

受控属性：是否启用单滑块模式，默认为 false 不展示，设置为 true 即启用。

默认值: false

showScale { Bool } #

受控属性：是否展示标签，默认为 true 展示，设置为 false 即不展示且不生成标签

默认值: true

scaleFormat { Function } #

受控属性：滑块滑到某一刻度时所展示的刻度文本信息。

注意：如果 step 相对 max - min 足够小，则默认会产生很多个标签，导致显示时会全挤在一块而变成纯色的 bug 样式，这时可设置 showScale 为 false ，可禁用且不渲染标签。

默认值: value => value

方法参数:

参数名 类型 描述 支持版本
scale Number 单个标签对应的 value 值
index Number 当前标签对应的下标

返回值: String 单个标签所展示的字符串，支持返回jsx。

scalePosition { Enum {'top','bottom'} } #

受控属性：滑块在轨道线的上边显示，还是下边

默认值: 'top'

onSliderTouchStart { Function } #

触发touchStart事件后，在事件结束前进行调用的函数，该函数有4个参数，onSliderTouchStart(value, translateX, event, sliderIndex)。

默认值: null

方法参数:

参数名 类型 描述 支持版本
value Number/Array 当前选中区间，单滑块为Number，双滑块为Array；
translateX Number/Array 当前滑块的translateX，单滑块为Number,双滑块为Array;
event Object 事件对象；
sliderIndex Number 当前鼠标拖动的滑块序号，0或1，0表示左滑块，1表示右滑块。

onSliderTouchMove { Function } #

触发touchMove事件后，在事件结束前进行调用的函数，该函数有3个参数，onTouchMove(value, translateX, event, sliderIndex)。

默认值: null

方法参数:

参数名 类型 描述 支持版本
value Number/Array 当前选中区间，单滑块为Number，双滑块为Array；
translateX Number/Array 当前滑块的translateX，单滑块为Number,双滑块为Array;
event Object 事件对象；
sliderIndex Number 当前鼠标拖动的滑块序号，0或1，0表示左滑块，1表示右滑块。

onSliderTouchEnd { Function } #

触发touchEnd事件后，在事件结束前进行调用的函数，该函数有4个参数，onSliderTouchEnd(value, translateX, event, sliderIndex)，event即事件对象。

默认值: null

方法参数:

参数名 类型 描述 支持版本
value Number/Array 当前选中区间，单滑块为Number，双滑块为Array；
translateX Number/Array 当前滑块的translateX，单滑块为Number,双滑块为Array;
event Object 事件对象；
sliderIndex Number 当前鼠标拖动的滑块序号，0或1，0表示左滑块，1表示右滑块。

onChange { Function } #

当滑动滑块后，滑块在停下时会通过调用上级的 onChange 回调函数，以来在上一层组件中调用 setState 来更新当前组件的状态。

默认值: value => console.log(value)

方法参数:

参数名 类型 描述 支持版本
value Number/Array 待更新的当前选中区间的对应值

extraClass { String } #

受控属性：扩展range组件样式所需添加的额外的类

方法

resize #

当容器宽度改变时，可手动调用 resize 将滑块重置到正确的位置上，可通过ref得到的组件实例来调用（在组件上加个ref属性）。 使用场景1：使用 popup 或者 modal 推出来，由于之前被 display: none 掉，无容器宽度，此时在组件展示的动画之前，在此组件的ref引用上调用此resize方法刷新位置即可。

 this.refs.range.resize();