imtaotao / input-range

Simulate native input range component.

Input range 🎉

中文文档

InputRange is a slide bar plugin, he simulates native input range component and makes you can highly customize the dom structure and the css style, if you don't want write dom structure and css style by yourself, InputRange provided react component and vue component. Detailed usage can be seen here

Effect

Installation

  npm install input-range --save

or

  yarn add input-range

About react and vue component

• react slide bar
• vue slide bar

How to use

InputRange has two ways to initialize

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

  // The first
  const slide = new Slide(options)
  slide.init()

  // The second
  const slide = createSlide(options)
  slide.init()

you can initialize appropriately after slide instance be created, for example, a dom element initially hidden and later displayed

options description

options except point，are all optional

Name	Description	Type	Default
point	slider button	element || string	undefined
direction	slider active direction	'x' || 'y'	'x'
limit_area	limit range while draging	number	100
pointer_event	whether to add the pointer-events attribute to the style of the slider	boolean	true
prohibit_click	whether to prohibit clicking slider	boolean	false
prohibit_move	whether to prohibit draging slider	boolean	false
click_el_index	Specifing which element of container triggers the click event (index starts from 0)	number	0
expand_touch_area	expand touch range	Object	undefined

expand_touch_area description

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

Instance attributes

value

siide.value record current slider value, value range is 0 to 1. It should be noted that the slide will be set to the default value according to the css value of the slide progress during initialization. slide doesn't provide default value interface, so you can achieve default value by html structure or dispatch method.

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

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

  <script>
    // If direction is '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)

Hook functions

• oninput

• onchange

• onerror

init

You can use init method to reset parameters in anytime.

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

dispatch

You can trigger the event manually, yeah! dispatch.

  // event type must be input or change
  // value must be between 0 and 1
  // you can use transition animate
  slide.dispatch('input', 1, true)

prohibit_click

This method use to prohibit clicking slide bar or cancel.

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

prohibit_move

This method use to prohibit draging slide bar or cancel.

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

oninput

You can compare this method to the callback of the input event of the native input range component.

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

You also can achieve similiar effect by rigistering input event on html element.

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

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

onchange

The onchange hook function is similiar with oninput, which is also simulating the native change event, except that you need to change input to change.

onerror

The onerror hook function accept error which InputRange send.

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