Notorious Preying Mantis

    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.

    Install

    npm i rangeslider-js

    DownloadsWeekly Downloads

    617

    Version

    3.2.5

    License

    MIT

    Unpacked Size

    66.1 kB

    Total Files

    14

    Last publish

    Collaborators

    • stbaer