Nice jQuery Range Input Replacement Plugin - Ranger

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:

• Simple Range Input Slider Plugin - slideControl
• Flexible and Touch-Friendly jQuery Range Slider Plugin - Ion.RangeSlider
• Lightweight and Customisable Range Slider Plugin -  noUiSlider
• Powerful Range Slider Plugin - jQRangeSlider
• Responsive & Touch-Friendly jQuery Range Slider Plugin

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.