Easy Range Picker Plugin For Bootstrap - bootstrap-range

The Bootstrap range plugin converts the normal text field into a range picker where you can choose maximum and minimum values from a dropdown select when focused. Ideal for age picker.

How to use it:

1. To use this plugin, make sure you first have jQuery library and Bootstrap framework included on the webpage.

<link href="/path/to/bootstrap.min.css" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

2. Include the jQuery bootstrap-range plugin's JS and CSS files on the webpage.

<link href="bootstrap-range.css" rel="stylesheet">
<script src="bootstrap-range.js"></script>

3. Create a normal input field for the range picker.

<input type="text" placeholder="Select Age" class="form-control age">

4. Initialize the plugin and specify the max/min values you prefer.

$("input.age").bootstrapRange({
  minValues: [10,15,20,25,30,40],
  maxValues: [10,15,20,25,30,40]
});

5. Options and defaults.

$("input.age").bootstrapRange({

  // default css class
  cssClass: 'at-bootstrap-range',
  // minimum values
  minValues: [],
  // maximum values
  maxValues: [],
  // placeholder of minimum input
  minPlaceholder: 'Minimum',
  // placeholder of maximum input
  maxPlaceholder: 'Maximum',
  // attribute for save selected minimum value
  minAttribute: 'data-minimum',
  // attribute for save selected maximum value
  maxAttribute: 'data-maximum',
  // minimum hint text
  minHintText: 'from',
  // maximum hint text
  maxHintText: 'to',
  // make iput readonly
  readonly: true,
  // format number values
  format: true,
  
});

6. Callback functions.

$("input.age").bootstrapRange({

  // callback function when select minimum value
  minimumCallback: function (min) {},

  // callback function when select maximum value
  maximumCallback: function (max) {}

});

---

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