rangeslider-js

3.2.5 • Public • Published

rangeslider-js

Build Status Inline docs Dependency Status

Simple, fast and lightweight slider, touch friendly

Docs and Examples

  • v1 was based on rangeslider.js, main differences:
    • no jQuery
    • raf to throttle window resize, transform to set the handle position
    • fewer and only basic styles
    • no vertical mode

Install

npm i rangeslider-js --save

Usage

<input id="slider1" type="range">
 
<input id="slider2" type="range" min="0" max="5" value="1" step="1">
import rangesliderJs from 'rangeslider-js'
 
// single, options via js 
rangesliderJs.create(document.getElementById('slider1'), {min:0, max: 1, value: 0.5, step: 0.1})
 
// or single, options via html attributes 
rangesliderJs.create(document.getElementById('slider2'))
 
// or initialize multiple
rangesliderJs.create(document.querySelectorAll('input[type="range"]'))

Options

{
    min: 0,
    max: 100,
    value: 50,
    step: 1,
    // callbacks
    onInit: (value, percent, position) => {},
    onSlideStart: (value, percent, position) => {},
    onSlide: (value, percent, position) => {},
    onSlideEnd: (value, percent, position) => {}
}

Events

Contribute or Report Issue

Pull requests should target the develop branch.

For bugs and feature requests, please create an issue.

Licence

MIT, see LICENSE.md for details.

Package Sidebar

Install

npm i rangeslider-js

Weekly Downloads

1,303

Version

3.2.5

License

MIT

Unpacked Size

66.1 kB

Total Files

14

Last publish

Collaborators

  • stbaer