adrianmejias/range-select

Range select a group of items.

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

This package is auto-updated.

Last update: 2022-07-06 19:08:53 UTC


README

Range select a group of items.

Table of contents

Quick start

Several quick start options are available:

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.');
  }
});