rangeslider-js

rangeslider-js

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.

Changelog

Release 3.2.5

May 20, 2019

• fixes examples in docs 9c54791