README_zh.md

Input range 🎉

InputRange 是一个滑动条插件，他模拟原生的 input range 组件，同时可以让你高度自定义dom结构和css样式，如果不想自己写dom结构和css样式，InputRange提供了react组件和vue组件。具体的用法可以看这里

安装

  npm install input-range --save

or

  yarn add input-range

关于 react 和 vue 组件

• react slide bar
• vue slide bar

如何使用

InputRange 有两种方式进行初始化

  const { Slide, createSlide } from 'input-range'

  // 第一种
  const slide = new Slide(options)
  slide.init()

  // 第二种
  const slide = createSlide(options)
  slide.init()

当slide实例被创建后，你可以在适当的时候进行初始化，比如某个dom元素最开始被隐藏，后来被显示出来

options 描述

options 除了 point 之外，都是可选的

Name	Description	Type	Default
point	滑动条按钮	element || string	undefined
direction	滑动条活动方向	'x' || 'y'	'x'
limit_area	拖动时候限制范围	number	100
pointer_event	是否给滑动条style添加pointer-events属性	boolean	true
prohibit_click	是否禁止点击滑动条	boolean	false
prohibit_move	是否禁止拖动滑动条	boolean	false
click_el_index	指定container 的哪个元素触发click事件（下标从0开始）	number	0
expand_touch_area	扩展点击范围	Object	undefined

expand_touch_area 描述

Name	Description	Type
width	宽	number || string
height	高	number || string

实例属性

value

slide.value 记录着当前滑动条的值，值为 0 到 1 之间。需要另外说明的是，slide 会在初始化的时候根据 slide progress 的 css 值进行默认值的设定，slide 没有提供 default value 接口，因此你可以通过 html 结构和 dispatch 两种方式，来实现默认值

  <div class="container">
    <span class="background"></span>
    <span class="progress">
      <i class="dot"></i>
    </span>
  </div>

  <style>
    .progress {
      width: 30%;
    }
  </style>

  <script>
    // 如果 direction 为 'x'
    const slide = new Slide(options)
    slide.init()
    slide.value // 0.3
  </script>

or

  const slide = new Slide(options)
  slide.init()
  slide.dispatch('change', 0.1)

api

• init()

• dispatch(event_type, value, is_animate)

• prohibit_click(prohibit)

• prohibit_move(prohibit)

钩子函数

• oninput

• onchange

• onerror

init

你可以在任何时候使用init方法进行参数重置

  const slide = new Slide(options)
  slide.init()

dispatch

你可以手动触发事件，没错，dispatch 一下

  // event type 只能为 input 或者 change
  // value 只能在 0 - 1 之间取值
  // 你可选择是否用过渡动画
  slide.dispatch('input', 1, true)

prohibit_click

此方法用来禁止点击 slide bar 或者 取消禁止点击 slide bar

  slide.prohibit_click(true)
  // or
  slide.prohibit_click(false)

prohibit_move

此方法用来禁止滑动 slide bar 或者 取消禁止滑动 slide bar

  slide.prohibit_move(true)
  // or
  slide.prohibit_move(false)

oninput

你可以把这个方法类似比作原生 input range 组件的 input 事件的回调函数

  slide.oninput = function(value, progress_el, slide) {
    ...
  }

你还可以通过给 html 元素注册 input 事件来实现相同的效果

  <span class="progress" id="p"></span>

  <script>
    p.addEventListener('input', e => {
      const value = e.value
      ...
    })
  </script>

onchange

onchange 钩子函数与 oninput 类似，同样是模拟原生 change 事件，除了需要把 input 换成 change 之外

onerror

onerror 函数用来接收 InputRange 发出的错误

  slide.onerror = function (err_msg, stacks) {
    ...
  }