Simple Custom Range Slider

The simplest JavaScript custom range slider ever!

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

• No Idea?
• Custom Classes
• Fallback to HTML5 <input type="range"> if JavaScript is Disabled
• Custom min and max Value in Range Slider as Pixel
• Tooltip

Folks

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

• Added support for touch devices by @beard86 → link