Multiple Range Interface

Multiple Range Interface is a jQuery plugin that creates an interface that allows the user to set multiple range based values.
It's useful for interacting with timeline based data like videos, slideshows, music, etc.

Install

bower install multiple-range-interface

Usage

HTML:

<div id="range-interface"></div>

JS:

$('#range-interface').multipleRangeInterface({
    onChange: function() {
        // Do stuff when the interface is changed
    },
    onSectionClick: function() {
        // Do stuff when a section is clicked
    }
});

Methods

After the interface is initialized methods can be called on it like so:

$('#range-interface').multipleRangeInterface('methodName', parameters);

addSection

Adds a new range section.

$('#range-interface').multipleRangeInterface('addSection', {color: '#DDDDDD'});

deleteSection

Deletes a range section by id.

$('#range-interface').multipleRangeInterface('deleteSection', id);

getValues

Gets values for all range sections.

$('#range-interface').multipleRangeInterface('getValues');

setValues

Sets values for given section id. The id field must be present in the parameters object.

$('#range-interface').multipleRangeInterface('getValues' {id: 1, start: 20, stop: 44});

selectSection

Selects a range section by id.

$('#range-interface').multipleRangeInterface('selectSection', 2);

getSelectedSection

Returns the data for the currently selected section.

$('#range-interface').multipleRangeInterface('getSelectedSection');

Browser Support

The following browsers are what I've tested:

• Chrome
• Firefox
• Opera

If you find the plugin works in other browsers please let me know and I'll add it to the list. Likewise if it doesn't work in certain browsers please let me know.