Skip to Content

minMaxSlider Demo

Here you can see a demonstration of the Jquery minMaxSlider. The best use of this is for search forms where minimum and maximum values for different items are sought.

Demo

Min:   Max:

How we did it

FIrst, make sure you include scripts for Jquery (1.3.2 or greater), Jquery UI slider (1.72 or greater) and minMaxSlider. Don't forget to also include the CSS for the UI components otherwise you won't see the slider.

  <link href="slider_css/slider.css" ...
  <script src="jquery-1.3.2.min.js" ...
  <script src="ui.core.js" ...
  <script src="ui.slider.js" ...
  <script src="jquery.minMaxSlider.js" ...

Then to add the slider the following code is used:

$(function() {
       $("#slider").minMaxSlider({
              'min_input' : '#min_price',
              'max_input': '#max_price',
              'min_size': 0,
              'max_size': 1000,
        });
});

To see the documentation for this plugin, or to download it, click here.