Slider-input NPM

Slider Input

A slider input UI implement. Demo

Include the script and style in your web page or install from npm first.

npm install --save slider-input

HTML:

<div id="my-slider"></div>

JavaScript:

var mySlider = new Slider(mySlider, config);

config is an Object and contains attributes below(optional):

Option	Description	Default
`init`	The initial value of the slider	`0`
`total`	The maximum value of the slider	`100`
`step`	The size of each movement	`false` (no step)
`loop`	Whether the slider loops(Att. If configured `true`, this will conflict with `swipeLeft` and `swipeRight` options and disable them. )	`false`
`swipeLeft`	The callback function after the slider is totally swiped left(Att. The slider will not be swiped away when `loop` is enabled. )	`null`
`swipeRight`	The callback function after the slider is totally swiped right(Att. The slider will not be swiped away when `loop` is enabled. )	`null`
`onChange`	The callback function when the value of the sider has changed	an empty function
`colors`	The colors of the user interface. If configured, it must be an array of two functions, which take a ratio between 0 and 1 as input, and return a valid css color expression	An array of two functions returning `#ccc` and `#333`

Detailed usage can be find easily from the source code of the Demo.

7 years ago