Nice jQuery Range Input Replacement Plugin - Ranger

Nice jQuery Range Input Replacement Plugin - Ranger
File Size: 16.5 KB
Views Total: 1709
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Ranger is an easy & fast jQuery plugin that converts standard range inputs (input type=range) into horizontal or vertical range picker/sliders with a good looking. 

Related plugins:

Basic Usage:

1. Create a standard range input.

<input type="range" name="range" min="1" max="100" step="1" />

2. Include the latest version of jQuery javascript library and jQuery ranger plugin's files in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="jquery.fs.ranger.css" rel="stylesheet" type="text/css" media="all" />
<script src="jquery.fs.ranger.js"></script>

3. Call the plugin on the range input after document ready.

<script>
$(document).ready(function() {
$("input[type=range]").ranger();
});
</script>

4. Customize the range slider by passing the options in the javascript or using data-* attributes.

$(document).ready(function() {
$("input[type=range]").ranger({

// Class applied to instance
customClass: "", 

// Value format function
formatter: $.noop, 

// Draw labels
label: true, 

labels: {

  // Max value label; defaults to max value
  max: false, 

  // Min value label; defaults to min value
  min: false 
},

// Flag to rander vertical range
vertical: false 

});
});

Change logs:

3.1.1 (2015-03-11)

  • Fixing labels

3.0.8 (2014-08-21)

  • Fixing regression with extending options; 
  • Adding 'orient' attribute;

3.0.6 (2014-08-21)

  • Removing callback.

3.0.5 (2014-05-29)

  • Fixing infinite callback loop in reset calls.

3.0.3 (2014-05-01)

  • Fixing issue with parsing initial value

3.0.2 (2014-02-07)

  • Fixing data checks;

This awesome jQuery plugin is developed by Formstone. For more Advanced Usages, please check the demo page or visit the official website.