About Float (Range slider)

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.

Category Input Fields
Inputfield modules that provide a UI input widget in the ProcessWire admin.
Release StateBeta
Close to stable, but users are advised to be cautious and test thoroughly.*
Authoreelkenet
Module Version0.0.5
Class NameInputfieldFloatRange
Compatibility3.0
Date AddedOctober 17, 2019
Last UpdatedOctober 23, 2019
Recommended ByNew recommendations may take up to 1 day to appear.

Instructions

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

README

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
  • 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