Skip to content

xyyjk/MRange

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 

Repository files navigation

MRange

MRange 是一个基于 Zepto.js 的滑动选取数值范围组件

使用

通过添加自定义属性 data-role="range" 来进行实例初始化,HTML 结构参照如下示例:

单点滑动:

<div class="input-range"
  data-role="range"
  data-min="-11.5"
  data-max="3"
  data-step="2.6"
  data-value="-2"
  data-name="testing1"
>
  <input type="hidden" data-input>
  <div class="track" data-track></div>
  <div class="pointer" data-pointer></div>
  <div class="label" data-label></div>
</div>
  • data-input: 对 input 元素设置该属性可在滑动时实时改变值
  • data-track: 滑动轨道
  • data-pointer: 滑动点
  • data-label: 滑动值显示

多点滑动:

<div class="input-range"
  data-role="range"
  data-min="-13"
  data-max="2"
  data-step="2"
  data-value="-9, -3"
  data-name="testing2"
>
  <input type="hidden" data-input>
  <div class="track" data-track></div>
  <div class="pointer pointer--low" data-pointer-low></div>
  <div class="pointer pointer--high" data-pointer-high></div>
  <div class="label label--low" data-label-low></div>
  <div class="label label--high" data-label-high></div>
</div>
  • data-input: 对 input 元素设置该属性可在滑动时实时改变值
  • data-track: 滑动轨道
  • data-pointer-low: 左侧滑动点
  • data-pointer-high: 右侧滑动点
  • data-label-low: 左侧滑动值
  • data-label-high: 右侧滑动值

事件监听示例:

window.ahm.range.testing1.on('dragstart', function(e) {
  // e._args.value 当前值
  console.log('dragstart, value:', e._args.value);
});

window.ahm.range.testing1.on('dragmove', function(e) {
  console.log('dragmove, value:', e._args.value);
});

window.ahm.range.testing1.on('dragend', function(e) {
  console.log('dragend, value:', e._args.value);
});

事件移除示例:

window.ahm.range.testing2.on('dragmove', function(e) {
  console.log('dragmove, value:', e._args.value);
  if (e._args.value === '-13,2') {
    window.ahm.range.testing2.off('dragmove');
  }
});

选项

  • data-min: {number} - [可选] 规定允许的最小值,默认 0(小于或等于最大值)
  • data-max: {number} - [可选] 规定允许的最大值,默认 100(大于或等于最小值)
  • data-step: {number} - [可选] 规定合法数字间隔,默认 1(如果 step="3",则合法的数字是 -3,0,3,6, 以此类推)
  • data-value: {number|Array} - [必选] 规定默认值,number 为单点滑动,number 为多点滑动(处于最小值与最大值之间)
  • data-name: {string} - [可选] 设定 range 名称,可通过 window.ahm.range[name] 来调用实例方法或监听事件

方法

  • setTrack(option): {min, max, step, value} - 设置轨道位置
  • getValue(): - 获取当前值
  • destroy(): - 移除滑动选值
  • reset(): - 重新初始化

事件

  • dragstart - window.ahm.range[name].on('dragstart', function(e) { ... });
  • dragmove - window.ahm.range[name].on('dragmove', function(e) { ... });
  • dragend - window.ahm.range[name].on('dragend', function(e) { ... });

更新日志

要查看最近更新的明细,请参见 Releases section

许可

MIT LICENSE