RangeRover

Customizable range selection plugin for jQuery, with support of categorization, single and range selections, custom and auto calculated sizes.

How to use

There are several ways for rangeRover plugin installation:

• using npm: npm install rangerover

• download and unpack zip file from github repository.

Load the latest version of jQuery library and plugin's files from dist folder in the html document.

<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="rangeRover/dist/jquery.rangerover.min.js"></script>
<link rel="stylesheet" href="rangeRover/dist/jquery.rangerover.min.css">

RangeRover usage basic example.

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

$("#range").rangeRover({
    range: true,
    mode: 'categorized',
    data: [
        {
          name: 'Lenin',
          start: 1917,
          end: 1923,
          color: '#6d99ff',
          size: 20
        },
        {
          name: 'Stalin',
          start: 1923,
          end: 1953,
          color: '#ff0000',
          size: 30
        },
        {
          name: 'Khrushchev',
          start: 1953,
          end: 1964,
          color: '#ffcc66',
          size: 25
        },
        {
          name: 'Brezhnev',
          start: 1964,
          end: 1982,
          color: '#6bf442',
          size: 10
      },
      {
        name: 'Dissolution',
        start: 1982,
        end: 1991,
        color: '#cccccc',
        size: 15
    }]
  });

Options

Option	Default value	Description
range	false	Enable range selection (start/end), default is single selection
mode	"plain"	Following modes are available - "categorized", "plain"
autocalculate	true	For categories' custom size this property should be false and size for each category should be provided
data	no default value	object for mode: plain and array of objects for mode: categorized
color	#e8e8e8	Slider's global color, gradients can be used as well
vLabels	false	Whether or not to show values' labels

Following properties are required in data's object

• start - start number
• end - end number

Optional properties

• name - will be displayed on period
• exclude - object { start: Number, end: Number } or plain array of values. These values will be unavailable for selection.
• color - color of period, gradients can be used as well
• size - category's custom size (percent), must use with autocalculate: false.

Events

• onChange - called when new item selected, function receive - selected value(s) and category(ies) if exist.

Methods

• select - call to specify selected value.

Examples

Basic example

$("#range").rangeRover({
    data: {
          start: 1917,
          end: 1923
        }
  });

With value labels

$("#range").rangeRover({
    range: true,
    vLabels: true,
    data: {
          start: 1,
          end: 10
        }
  });

Using gradients

$("#range").rangeRover({
    range: true,
    mode: 'categorized',
    data: [{
      name: 'Cheap',
      start: 200,
      end: 500
    },
    {
      name: 'Medium',
      start: 500,
      end: 1000
    },
    {
      name: 'Expensive',
      start: 1000,
      end: 2000
    }
  ]
});

.ds-progress {
  background: -webkit-linear-gradient(left, #d0d0d0, black);
}