FieldtypeRangeSlider by soma

Simple jQuery UI integer range slider that can be configured.

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

Install and use modules at your own risk. Always have a site and database backup before installing new modules.

Twitter updates

  • There’s a new modules directory on the ProcessWire site now up and running. In this post we’ll cover a few details about what’s changed and what’s new—More
    20 November 2020
  • ProcessWire 3.0.168 core updates — More
    26 October 2020
  • This week a 2nd new module for processing Stripe payments has been added to FormBuilder. Unlike our other Stripe Inputfield, this new one supports 3D Secure (SCA) payments. We’ll take a closer look at it in this post, plus a live demo— More
    16 October 2020

Latest news

  • ProcessWire Weekly #342
    In the 342nd issue of ProcessWire Weekly we're going to check out brand new admin theme called Admin Theme Canvas, a new module called MatomoWire, latest ProcessWire core updates, and more. Read on! / 28 November 2020
  • New ProcessWire modules directory
    There’s a new modules directory on the ProcessWire site now up and running. In this post we’ll cover a few details about what’s changed and what’s new.
    Blog / 20 November 2020
  • Subscribe to weekly ProcessWire news

“The end client and designer love the ease at which they can update the website. Training beyond how to log in wasn’t even necessary since ProcessWire’s default interface is straightforward.” —Jonathan Lahijani