This package has been deprecated

Author message:

this package has been deprecated due to old, shitty code

jMinMaxSelect

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

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 $</option>
    <option value="100">100 $</option>
    <option value="200">200 $</option>
    ...
    <option value="900">900 $</option>
</select>

<select id="price_max">
    <option value="0">0 $</option>
    <option value="100">100 $</option>
    <option value="200">200 $</option>
    ...
    <option value="1000">1000 $</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 $</option>
    <option value="100">100 $</option>
    <option value="200">200 $</option>
    <option value="300">300 $</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 $</option>
    <option value="100">100 $</option>
    <option value="200">200 $</option>
    <option value="300">300 $</option>
    ...
    <option value="9000">900 $</option>
</select>

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

Create options via parameter

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

<select id="price_max">
</select>

$('#price_min').jMinMaxSelect({
    maxSelect: '#price_max',
    createOptions: {
        "0 $": 0,
        "100 $": 100,
        "200 $": 200,
        "300 $": 300,
        "400 $": 400
    }
});

This will produce:

<select id="price_min">
    <option value="0">0 $</option>
    <option value="100">100 $</option>
    <option value="200">200 $</option>
    <option value="300">300 $</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>
</select>

Create options and infinty element

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

<select id="price_max">
</select>

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

This will produce:

<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>
</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=">= 400">over 400 $</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