single/range slider - pure JS

Download from Github

A MIT licensed JS range slider plugin, no dependencies required.

How to use

Include css and js files:

    <link rel="stylesheet" href="css/rSlider.min.css">
    <script src="js/rSlider.min.js"></script>

Add an input field to your HTML code

    <input type="text" id="sampleSlider" />

Add a small Javascript piece to your JS file:

    var mySlider = new rSlider({
        target: '#sampleSlider',
        values: [2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015],
        range: true,
        tooltip: true,
        scale: true,
        labels: true,
        set: [2010, 2013]


target Single element's class/id or HTML object e.g. document.getElementById('sampleSlider')
values A flat array of values e.g. [1, 2, , 4, 5] or object e.g. {min: 1, max: 10}.
step While using an object value {min: 0, max: 100} the step can be defined e.g. 10
range Boolean (true or false) to set if the slider is range or single type (default false)
set A flat array of one (single slider) or two (range slider) values to set initial values (optional)
width Number or string value (e.g. 400 or '400px') to set the slider width (optional). Default the closest parent div width is used.
scale Boolean (true or false) to show or hide scale (default true).
labels Boolean (true or false) to show or hide scale labels (default true).
tooltip Boolean (true or false) to show or hide tooltips (default true).
disabled Boolean (true or false) to disable/enable slider (default false).


Methods can be used after a new instance of slider is initiated e.g. slider.getValue();

getValue() Returns selected values.
disabled(true/false) Makes a slider disabled/enabled
onChange(callback) the callback function argument returns current selected values e.g
mySlider.onChange(function (values) { // argument values represents current values });
setValues(start, end) Method gets one (range: false) or two (range: true) parameters and sets the values (see example above).
destroy() Removes an instance of slider e.g. mySlider.destroy();
Download from Github