The simplest JavaScript custom range slider ever!
HTML JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
LICENSE
README.md
index.html
range-slider.css
range-slider.custom-range.html
range-slider.custom.html
range-slider.html
range-slider.js Update Sep 15, 2016
range-slider.min.css Add More Demos Jul 21, 2016
range-slider.min.js
range-slider.multiple-range.html
range-slider.replace.html
range-slider.test.html
range-slider.tip.html

README.md

Simple Custom Range Slider

The simplest JavaScript custom range slider ever!

View Demo

Basic Usage

The required HTML is:

<div id="range-slider-1"></div>

Execution…

Basic

// horizontal slider
RS(document.getElementById('range-slider-1'), function(value, target, event) {
    console.log(value);
});

// vertical slider
RS(document.getElementById('range-slider-1'), function(value, target, event) {
    console.log(value);
}, true);

Advance

RS(document.getElementById('range-slider-1'), {
    value: 1, // initial value
    vertical: false, // vertical or horizontal slider?
    create: function(value, target) { … }, // create event
    start: function(value, target, event) { … }, // start event
    drag: function(value, target, event) { … }, // drag event
    stop: function(value, target, event) { … } // stop event
});

Examples

Folks

Update 2016/07/21: Is now has support for touch devices by default.

  • Added support for touch devices by @beard86 → link