(preload) (preload)

Setting up

The plugin doesn't depend on anything but JQuery. However, if JQuery UI sliders are to be used, a copy of JQuery UI's sliders and their dependencies is also required.

To generate the sliders, it is necessary to have 3 or more text input fields inside some parent element. It is not possible to add text input fields that are not part of the bound sliders set inside that element; however, other types of input fields are allowed (e.g. submission buttons).

The bound sliders are then initialised by selecting the parent element(s) and calling the boundSliders method:

$('jquery selector of parent element(s)').boundSliders(); // Default options
$('jquery selector of parent element(s)').boundSliders({ ... }); // Custom options


The following options can be used whether the sliders are being used in basic, button-based mode or in combination with JQuery UI's sliders.

JQuery UI sliders

The jquerySliders option can be set to true to enable JQuery UI sliders. There are no additional options in this mode.


When the plugin is being used without JQuery UI's sliders, it will use buttons which allow the values to be modified. By default, two buttons are displayed for each field (one increases the value, the other decreases it).

It is however possible to force the plugin to display two additional buttons, which increase/decrease the value by a higher value than just 1. The bigIncrement option needs to be set to this increment's value (it must be greater than 1).

Finally, while buttons are displayed using text (+ , - , ++ and --) by default, it is possible to use pictures instead. This is done by setting the buttons option to an array of 2 or 4 strings (depending on whether the "big increment" buttons are being used) which specify the path or URL of the pictures. The array elements are:

  1. increase button
  2. decrease button
  3. big increase button
  4. big decrease button