PureJS Range Slider Demo

Features     📺

• Pure Native Javascript (No Jquery)
• Fully Responsive
• Vertical Slider also Available
• File Size
  • js (6KB)          |       gzip (1.91Kb)
  • css (1.05KB)  |       gzip (423 bytes)
• Easily Customizeable
• Can be used without input tag
• Full Browser Support
• Feel Free To submit any error
• A video tutorial is also available

See This Picture For More Clear Look

;

Syntax

    <div id="demo" class="range-slider">
        <div class="range-slider-completed"></div>
    </div>

new rangeSlider({
    id: "demo",  // this is a normal id without input[type='range']
    min: 0, // optional       |  Default: 0
    max: 20, // optional      |  Default: 100
    step: 1, // optional      |  Default: 1
    current: 0, // optional   |  Default: 0
    input: function() {   // Optional
        console.log(this.current);
    },
    changed: function() { // Optional
        console.log(this.current);
    },
    created: function() { // Optional
        console.log(this);
    }
});

Here Is The Browser Supprt

Build With Love ❤ By 😎 Gaurav Bhardwaj 😎