About Range Slider

Simple jQuery UI integer range slider that can be configured.

Category 1Field Types
Fieldtype modules that represent a data type used by fields.
Category 2Input Fields
Inputfield modules that provide a UI input widget in the ProcessWire admin.
Release StateStable
Should be safe for use in production environments. *
Module Version1.0.4
Class NameFieldtypeRangeSlider
Compatibility2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7
Date AddedJuly 24, 2012
Recommended ByNew recommendations may take up to 1 day to appear.


Official readme



This module's files should be placed in /site/modules/FieldtypeRangeSlider/
How to install or uninstall modules


RangeSlider module for ProcessWire 2.+

Forum thread: RangeSlider Thread

How does it work

This fieldtype let's you create slider input fields in the admin using the built in jQuery UI Slider. You can use it as a regular single value slider, or enable range which gives you two number.

Output the values in templates

If used as single value slider echo $page->fieldname

If ranged slider is enabled echo $page->fieldname->min echo $page->fieldname->max

Use in selectors strings

With a regular single value slider $pages->find("range=120");

If range slider is enabled $pages->find("range.min>=100, range.max<120");

It comes with various settings.

  • range enable
  • width of slider (%)
  • min value
  • max value
  • default value
  • step
  • prefix for displayed value(s)
  • suffix for displayed value(s)

How to install

  1. Download and place the FieldtypeRangeSlider folder in: /site/modules/

  2. In the admin control panel, go to Modules. At the bottom of the screen, click the "Check for New Modules" button.

  3. Now scroll to the RangeSlider Fieldtype module and click "Install".

  4. Create a new Field with the new "RangeSlider" Fieldtype. Once saved you can configure the fieldtype, with various options under "Details" tab.

Upgrade Notes

from 1.0.3 to 1.0.4

Value type of the field has changed from RangeSlider object to array. This only affects how you would set values to the field or inputfield from the API. So if you used RangeSlider previous 1.0.4 and have custom code to modify values via API, either in modules or template files, you should modify it to account for the changes.

Before 1.0.4

$page->myslider->min = 42;

$page->myrange->min = 10;
$page->myrange->max = 40;


$page->myslider = array('min' => 91);

$page->myrange->min = array('min' => 10);
$page->myrange->max = array('max' => 40);

Accessing the value hasn't changed and is still the same as in prior versions.


  • 1.0.4 : Changed value type from RangeSlider object to array. Updated Inputfield to make it work as module config field (where Fieldtype isn't used).