adrianmejias/range-select

Range select a group of items.

dev-develop 2015-09-30 05:13 UTC

Requires

• jquery/jquery: 1.11.*

Replaces

• adrianmejias/range-select: dev-develop

Public Domain

• Adrian Mejias

• jquery
• JS
• select
• range

README

Range select a group of items.

Table of contents

• Quick start
• What's included
• Example
• Available options

Quick start

Several quick start options are available:

• Download the latest release.
• Clone the repo: git clone https://github.com/adrianmejias/range-select.git.
• Install with Bower: bower install range-select.

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

range-select/
├── range-select.js
├── range-select.min.js

Example

Example range select usage:

Demo: https://adrianmejias.com/range-select

<!-- Include jQuery Beforehand -->
<script src="range-select.js"></script>
<link href="range-select-example.css" rel="stylesheet">
<ul data-toggle="range-select">
  <li class="range-item">Item 1</li>
  <li class="range-item">Item 2</li>
  <li class="range-item">Item 3</li>
  <li class="range-item">Item 4</li>
  <li class="range-item">Item 5</li>
</ul>

$('[data-toggle=range-select]').rangeSelect();

Available options

• selector: string Element item that will be selectable.
• toggle: object|string Create your own toggle function.
• activate: object|string Create your own activate function.

$('[data-toggle=range-select]').rangeSelect({
  selector: '.range-item',
  toggle: function(self, this, index, prev_index) {
    console.log('Item toggled.');
  },
  activate: function(self, this, index, prev_index){
    console.log('Item activated.');
  }
});