🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

rangeRover is a lightweight jQuery plugin to render a customizable range slider from dynamic data sets that feature categorized, range, and single selections.

Range-Slider

Documentation

RangeRover

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

RangeRover with vLabels example

RangeRover with gradient animated

RangeRover usage basic example

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

RangeRover usage basic example

With value labels

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

RangeRover with vLabels example

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

RangeRover with gradient

RangeRover with gradient animated


You May Also Like