Skip to content

A repository re-created out of paolorovella one (which was deleted).

Notifications You must be signed in to change notification settings

AnimaLupi/multiple-range-input

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Multiple Range Input

Multiple Range Input is a jQuery plugin (based on Garrett Grimm's Multiple Range Interface) that creates an input 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-input

##Usage HTML:

<div id="multiple-range-input"></div>

JS:

$('#multiple-range-input').multipleRangeInput({
	onChange: function() {
		// Do stuff when the input values change
	},
	onSectionClick: function() {
		// Do stuff when a section is clicked
	},
	onSectionAdded: function(item) {
		// Do stuff when a section is added
	},
});

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

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

###addSection Adds a new range section.

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

Adds a new range section with a task.

$('#multiple-range-input').multipleRangeInterface('addSection', {type: 'task'});

###deleteSection Deletes a range section by id.

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

###getValues Gets values for all range sections.

$('#multiple-range-input').multipleRangeInterface('getValues');

###setValues Sets values for given section id. The id field must be present in the parameters object. You can set a readOnly optional parameter or a title for a task

$('#multiple-range-input').multipleRangeInterface('setValues' {id: 1, start: 20, stop: 44, readOnly: true, title });

###selectSection Selects a range section by id.

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

###getSelectedSection Returns the data for the currently selected section.

$('#multiple-range-input').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.

About

A repository re-created out of paolorovella one (which was deleted).

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published