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.
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.