Customizable range slider with labels (but without jQuery)

• Screenshots
• Quick start
• Usage
• Examples
• Options
• Methods
• Events
• Browser support
• Copyright and license

Several quick start options are available:

• rangeslide.js
• rangeslide.css

• rangeslide.min.js
• rangeslide.min.css

bower install rangeslide.js --save

npm install rangeslide.js --save

Done!

<link rel="stylesheet" href="/path/to/rangeslide.css">
<script src="/path/to/rangeslide.js"></script>

<div id="rangeslide" class="rangeslide"></div>

All you need to do is invoke rangeslide on an element:

var myRangeslide = rangeslide(domNode, options);

You can also initialize with css selector string:

var myRangeslide = rangeslide("#elementId", options);

There are some example usages that you can look at to get started. They can be found in the examples folder.

• Complete examples page

rangeslide.js can accept an options object to alter the way it looks and behaves. If no options object is passed default values are used. The example of a structure of an options object is as follows:

{
  data: [
  	{ name: "example1", item: "Example text" },
  	{ name: "example2", item: "Another example text" },
  	{ name: "example3", item: function() { return "And yet another example text"; }
  ],
  showLabels: true,
  showTicks: true,
  labelsPosition: "alternate",
  startAlternateLabelsFromTop: true,
  startPosition: 0,
  thumbHeight: 16,
  thumbWidth: 16,
  handlers: {
    initialized: function(rangeslideElement) {},
    valueChanged: function(data, rangeslideElement) {},
    markerClicked: function(data, markerElement) {}
  }

Here is the explanation of options object:

Data collection for rangeslide is provided during instatiation or later using "data" attribute in options. Number of steps (markers) for a slider is equal to number of items passed in this attribute. Each data item is required to have at least "name" attribute (String). You can also pass additional data using "item" attribute. Below is an example of proper data setup:

rangeslide("#element" {
	data: [
    	{ name: "data1", item: "simple string data"},
        { name: "data2", item: ["data", "in", "a", "form", "of ", "an", "array"] },
        { name: "data3", item: function() { return "data in a form of a function"; } },
        { name: "data4", item: { "passing": "object", "as": "data" } },
        { name: "data5" }
    ]
})

Rangeslide constructed with the above data will have 3 steps (markers).

Methods are called on rangeslide instances. You shoud save the instances to variable to have further access to it.

Get current rangeslide value.

var item = rangeslide.getValue();

Gets rangeslide's DOM node object.

var node = rangeslide.getElement();

Set rangeslide value by specifying data index.

rangeslide.setValue(2);

Set rangeslide value by specifying data name. If multiple data items with the same names are found first one is set.

rangeslide.setValueByName("exampleName");

Gets rangeslide's DOM node object.

rangeslide.setOption("autoPlay", true);

Manually refresh and redraw rangeslide. Invoked automatically when options change.

rangeslide.refresh();

rangeslide.js provides custom events for some of it's actions. Appropriate callbacks can be specified in options.

Event handlers are passed in rangeslide options like in the example below:

rangeslide("#element" {
	handlers: {
    	"valueChanged": [function(data, element) { console.log(data); }],
        "labelClicked": [
        	function(data, element) { console.log(data); },
            function(data, element) { return data.name; },
            function(data, element) { element.style.backroundColor = "#e2e3e4"; },
        ]
    }
})

Licensed under MIT license.

^ back to top