jQuery Plugin For Lower and Upper Bound Selects - jMinMaxSelect

jMinMaxSelect is a jQuery based dependent select plugin which allows the visitor to select numeric values within a range (e.g. min / max values) from two associated dropdown selects. A great alternative to the boring range slider.

How to use it:

1. Add min & max selects to the webpage.

<select id="price_min">
  <option value="0">0 $</option>
  <option value="100">100 $</option>
  <option value="200">200 $</option>
  <option value="300">300 $</option>
  <option value="400">400 $</option>
  <option value="500">500 $</option>
  <option value="600">600 $</option>
  <option value="700">700 $</option>
  <option value="800">800 $</option>
  <option value="900">900 $</option>
</select>

<select id="price_max">
  <option value="100">100 $</option>
  <option value="200">200 $</option>
  <option value="300">300 $</option>
  <option value="400">400 $</option>
  <option value="500">500 $</option>
  <option value="600">600 $</option>
  <option value="700">700 $</option>
  <option value="800">800 $</option>
  <option value="900">900 $</option>
  <option value="1000">1000 $</option>
</select>

2. Include the jQuery jMinMaxSelect plugin after jQuery library but before we close the body tag.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="src/jminmaxselect.dev.js"></script>

3. Call the function on the min select and specify the selector for the max select.

$('#price_min').jMinMaxSelect({
  maxSelect: '#price_max'
});

4. Plugin's default options.

$('#selector').jMinMaxSelect({

  // selector for maxSelect
  maxSelect: null,

  // copy all options to maxSelect
  copyOptions: false,

  // create all options via a JavaScript object
  createOptions: undefined,

  // displayed as the total upper bound to the user
  infWord: 'inf',

  //  the value of the total upper bound
  infValue: 'Infinity',

  // if set to true, there a value like infinity. 
  // this can be used a a total upper bound.
  useInf: false
  
});

---

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