InputfieldFloatRange by eelke

Simple and fast HTML5 input range slider, with optional precision, min/max and step settings. Works as a drop-in replacement for regular float and integer fields.

Float (Range) InputField

What is it?


The missing range slider Inputfield for Processwire. See also the Processwire Forum thread and the Modules directory listing.

What does it do?


This module extends InputfieldFloat and allows you to use HTML5 range sliders for number fields in your templates. It includes a visible and editable value field, to override/tweak the value if required.

Features


  • Min/max values
  • Precision (number of decimals)
  • Optional step value (Read more)
  • Optional manual override of the selected value (will still adhere to the rules above)
  • Configurable rounding of manually entered values (floor, round, ceil, disable)

Usage


  • Clone / zip repo, or run composer require eelke.net/float-range in your PW root
  • Install FieldtypeFloatRange, this automatically installs the Inputfield
  • Create new field of type Float (range) or convert an existing Float, Integer or Text field.
  • To render the field's value simply echo $page->field

Demo


A field with Min=0, Max=1, Step=0.2, Precision=2:

Field with settings Min=0, Max=200, Step=0.25, Precision=2

Todo


  • Make the display-field's size configurable (will use the Input Size field setting)
  • Hopefully become redundant

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

Latest news

  • ProcessWire Weekly #569
    The 569th issue of ProcessWire Weekly brings in all the latest news from the ProcessWire community. Modules, sites, and more. Read on!
    Weekly.pw / 5 April 2025
  • ProcessWire 3.0.244 new main/master version
    ProcessWire 3.0.244 is our newest main/master/stable version. It's been more than a year in the making and is packed with tons of new features, issue fixes, optimizations and more. This post covers all the details.
    Blog / 18 January 2025
  • Subscribe to weekly ProcessWire news

“To Drupal, or to ProcessWire? The million dollar choice. We decided to make an early switch to PW. And in retrospect, ProcessWire was probably the best decision we made. Thanks are due to ProcessWire and the amazing system and set of modules that are in place.” —Unni Krishnan, Founder of PigtailPundits