Skip to Content

Jquery MinMaxSlider

The minMaxSlider extends the functionality of the Jquery UI slider by allowing synchronisation between the slider and linked input fields in a form. This means that users can set values in form input fields which will change the slider. This is great because it makes the slider very intuitive for users if they are not familiar with sliders.

Default Implementation

You can implement the minMaxSlider on any block level element in your form with the following code.

$("div#slider").minMaxSlider();

This will define a basic minMaxSlider based on the default configuration options.

Configuration Options

You can change any of the configuration options on implementation to customise how your slider will work:

slider By default the slider is attached to the calling element. With this option you can set it to something else.
min_input This is the tag that identifies the minimum input box for the slider.
max_output This is the tag that identifies the maximum input box for the slider.
min_size This sets the minimum size of the slider, default = 0.
max_size This sets the maxium size of the slider, default = 500.
sync_inputs This sets whether the input values and slider values are synchronised at all times. For instance this may be useful when you allow the max input to have a higher value then might be displayed on the slider.

Requirements

To use the minMaxSlider you must have Jquery 1.3.2 or later, Jquery UI core 1.7.2 and the UI slider. You can download these all here.

Demo

View a working demo of this plugin and an example implementation here.

Download

Version 1.1 minMaxSlider Download (1.3kb)

This is provided to you as is but we would welcome any feedback, bug fixes or enhancements to this plugin.

Contributors

Thanks to Eric Ostrom at http://echographia.com for his help on version 1.1.

Licenses

This plugin is dual-licensed under the GNU General Public License and the MIT License.

DId you like this?

If you liked this, why not make a donation and help support ongoing development.

Comments

orientation can be vertical?

Hi...the orientation can be vertical?

Yes, the slider bars can be

Yes, the slider bars can be horizontal or vertical. Check out the docs at jqueryui.com for more.

James

Злой как собака.

Sarah

Столько одеж на одну ложь.

Lisa

Его и черт в ступе не утолчет.

Shelly

All roads lead to Rome. Все дороги ведут в Рим.