InvisibleRangeSlider

This library can use HTML object like sliders. I created this lib for my photo app. When user drag's on photo then app change filter gain. Look at demo: https://asmyk.github.io/invisiblerangeslider/

Getting Started

Install it via npm:

npm install InvisibleRangeSlider

And include in your project:

import InvisibleRangeSlider from 'InvisibleRangeSlider';

// create sldier instance and connect to container
let rangeSlider = new InvisibleRangeSlider({selector: ".js-container", callback: (value)=>{ console.log("changed value:", value)}});

And that is all. All you need is value passed in callback. Default value range is 0-100.

USAGE

let rangeSlider = new InvisibleRangeSlider({
    selector = "body", // target object selector. Also, target object can be passed directly(look for target element)
    min = 0, // minimum slider value
    max = 100, // maximum slider value
    callback, // [REQUIRED] callback function invoked on every value change
    value = 0,  // initial value
    target = null, // target DOM object
    isInvertedDirection = false // slider direction. default behavior works like default slider - positive values are on the right. When true - positive values are on the left side.
    });

// remove all listeners
rangeSlider.stopListening();

License

MIT