[external] Adding range and step functionality to an integer number field

External content by Markus Jenni; October 1, 2024; 

Html5 introduced the min/max attributes, which allows us to set a range of allowed values. In addition to these. There is also a step attribute to only allow certain steps in between the range. You can then increase/decrease the value by using the arrow up/down keys.


This can be achieved by the following steps:

1. Create a global Form rule, switch the Edit mode to "JavaScript mode" and add the following JavaScript

   window.nxWebcon = window.nxWebcon || {};
   nxWebcon.integerRange = nxWebcon.integerRange || {};
   
   nxWebcon.integerRange.initialize = function(formFieldName, min, max, step) {
     let selector =  "#" + formFieldName.replace("WFD_","") + " input";
     let integerInput = $(selector);
     nxWebcon.integerRange.addAttributeIfNotNull(integerInput, "min", min);
     nxWebcon.integerRange.addAttributeIfNotNull(integerInput, "max", max);
     nxWebcon.integerRange.addAttributeIfNotNull(integerInput, "step", step);
     integerInput.attr("type", "number");
     integerInput.attr("oninput", "nxWebcon.integerRange.processChanges(this)");
   }
   
   nxWebcon.integerRange.addAttributeIfNotNull = function(integerInput, attributeName, value){
     if (value != null) 
       integerInput.attr(attributeName, value);
     else 
       integerInput.removeAttr(attributeName)
   }
   
   nxWebcon.integerRange.maxLengthCheck = function(object) {
      let integerRange = new IntergerRange(object);
      object.value = integerRange.getValue();
   }
   
   nxWebcon.integerRange.debounce = function(func, timeout = 300){
     var timer;
     return (...args) => {
       clearTimeout(timer);
       timer = setTimeout(() => { func.apply(this, args); }, timeout);
     };
   }
   
   nxWebcon.integerRange.processChanges = nxWebcon.integerRange.debounce((elem) => nxWebcon.integerRange.maxLengthCheck(elem));
   
   class IntergerRange {
     constructor(elem){
       this.value = parseInt(elem.value);
       this.min = parseInt(elem.min);
       this.max = parseInt(elem.max);
       this.step = parseInt(elem.step);
     }
   
     getValue(){
       this.value = this.value < this.min ? this.min : (this.value > this.max ? this.max : this.value);
       if (!isNaN(this.step)) {
         this.value = Math.round(this.value/this.step)*this.step;
       }
       return this.value;
     }
   }

   

2. On your form, add a Html field and add the following lines as Html content. Check the "Show different HTML content in readonly" and leave the content blank
   

When initializing the field, min/max and step attributes are set if not null.
The script allows you to enter a value manually that is then rounded up to the next possible value.

Which is a much better user experience than the built-in error message:


Did not try, but you should be able to use the script for Decimal fields too.

Have fun.