jminmaxselectdeprecated

A jQuery plugin to create intelligent min and max selects. Sometimes you can not use a range slider. So you maybe will mimic the function of a range slider with a lower and upper bound select.

Usage no npm install needed!

<script type="module">
  import jminmaxselect from 'https://cdn.skypack.dev/jminmaxselect';
</script>

README

jMinMaxSelect

bower npm Build tool GitHub license

A jQuery plugin to create intelligent min and max selects. Sometimes you can not use a range slider. So you maybe will mimic the function of a range slider with a lower and upper bound select.

Size: 1.91 KB

a little demo gif

Demo

Take a look at the Demo or run the demo.html file.

Install

Bower

bower install jMinMaxSelect

npm

npm install jminmaxselect

Note

Yeah the npm is in uppercase letters only!

The oldschool way

Reference the JavaScript file manually directly after jQuery:

<script src="dist/jminmaxselect.min.js" type="text/javascript" charset="utf-8"></script>

Demo

Take a look at the Demo or run the demo.html file.

Code Examples

The easiest way to use jMinMaxSelect

Just invoke jMinMaxSelect on a select element.

<select id="price_min">
    <option value="0">0 lt;/option>
    <option value="100">100 lt;/option>
    <option value="200">200 lt;/option>
    ...
    <option value="900">900 lt;/option>
</select>

<select id="price_max">
    <option value="0">0 lt;/option>
    <option value="100">100 lt;/option>
    <option value="200">200 lt;/option>
    ...
    <option value="1000">1000 lt;/option>
</select>
$('#price_min').jMinMaxSelect({
    maxSelect: '#price_max'
});

To lazy for copying options

Let jMinMaxSelect do the work, use the createMax parameter to copy options from one select to the other. Example:

<select id="price_min">
    <option value="0">0 lt;/option>
    <option value="100">100 lt;/option>
    <option value="200">200 lt;/option>
    <option value="300">300 lt;/option>
</select>

<select id="price_max">
    <!-- empty -->
</select>
$('#price_min').jMinMaxSelect({
    maxSelect: '#price_max',
    createMax: true
});

This will produce:

<select id="price_min">
    <option value="0">0 lt;/option>
    <option value="100">100 lt;/option>
    <option value="200">200 lt;/option>
    <option value="300">300 lt;/option>
    ...
    <option value="9000">900 lt;/option>
</select>

<select id="price_max">
    <option value="100">100 lt;/option>
    <option value="200">200 lt;/option>
    <option value="300">300 lt;/option>
    ...
    <option value="1000">1000 lt;/option>
</select>

Create options via parameter

<select id="price_min">
</select>

<select id="price_max">
</select>
$('#price_min').jMinMaxSelect({
    maxSelect: '#price_max',
    createOptions: {
        "0 quot;: 0,
        "100 quot;: 100,
        "200 quot;: 200,
        "300 quot;: 300,
        "400 quot;: 400
    }
});

This will produce:

<select id="price_min">
    <option value="0">0 lt;/option>
    <option value="100">100 lt;/option>
    <option value="200">200 lt;/option>
    <option value="300">300 lt;/option>
</select>

<select id="price_max">
    <option value="100">100 lt;/option>
    <option value="200">200 lt;/option>
    <option value="300">300 lt;/option>
    <option value="400">400 lt;/option>
</select>

Create options and infinty element

<select id="price_min">
</select>

<select id="price_max">
</select>
$('#price_min').jMinMaxSelect({
    maxSelect: '#price_max',
    createOptions: {
        "0 quot;: 0,
        "100 quot;: 100,
        "200 quot;: 200,
        "300 quot;: 300,
        "400 quot;: 400
    },
    useInf: true,
    infWord: 'over 400 

,
    infValue: '>= 400'
});

This will produce:

<select id="price_min">
    <option value="0">0 lt;/option>
    <option value="100">100 lt;/option>
    <option value="200">200 lt;/option>
    <option value="300">300 lt;/option>
    <option value="400">400 lt;/option>
</select>

<select id="price_max">
    <option value="100">100 lt;/option>
    <option value="200">200 lt;/option>
    <option value="300">300 lt;/option>
    <option value="400">400 lt;/option>
    <option value=">= 400">over 400 lt;/option>
</select>

Options

Option Default Type Description
maxSelect null jQuery string Just pass an id of a select element, should be the id of the upper bound.
copyOptions false boolean (optional) If set to true, it copies all options from the passed select to maxSelect.
createOptions null object (optional) Create all options via a JavaScript object.
useInf false boolean (optional) If set to true, there a value like infinity. This can be used a a total upper bound.
infWord 'inf' string (optional) This string is displayed as the total upper bound to the user (only works if useInf is true).
infValue 'Infinity' string (optional) This is the value of the total upper bound (only works if useInf is true).

How to build your own version

If you would like to build your own version of jMinMaxSelect, the only thing you need to do is to follow the steps below.

$ cd jMinMaxSelect
$ npm install
$ grunt

Browser compatibility

  • Chrome 6+
  • FireFox 4+
  • Safari 5+
  • Opera 11+
  • Internet Explorer (Sry I do not have a Windows Machine)

Author

Oliver Jessner @oliverj_net, Website

Copyright © 2015