MachForm Community Forums Topic: Turn a number post into range

MachForm Community Forums Topic: Turn a number post into range https://www.machform.com/forums/ MachForm Community Forums Topic: Turn a number post into range en Thu, 18 Jun 2026 15:06:33 +0000 offcourse on "Turn a number post into range" https://www.machform.com/forums/topic/turn-a-number-post-into-range#post-23629 Tue, 14 Jul 2015 22:38:02 +0000 offcourse 23629@https://www.machform.com/forums/ <p>Hi</p> <p>Just wanted to share a little tweak I did to be able to turn a number field into a range field. I also turned the Number field into an html5 "number" instead of "text".</p> <p>I still have a couple doubts, because I am using the "Custom CSS class" field.</p> <p>Basically, I am using that field to tell Machform that it is a range field, rather than a regular number one. I am using the parameters min,max and default_value to prepare the slider and then I added a small section to show the currently selected value. Still needing to make the "step" value configurable, so ideas are welcome.</p> <p>The only thing I would like to try and understand was how to make use of the existing classes at the same time. For instance, by using column_2 and the new "range" value/class, how would I use them both.</p> <p>Suggestions are welcome, although for now this solves my problem.</p> <p>I edited the view-functions.php file and in line 2806 I added the following code:</p> <pre><code>//build the tag for range is that is the class if($element->css_class == 'range'){ $new_field_type = $element->css_class; $rangeUpdater = 'oninput="outputUpdate(value)"'; $rangeValue = '<output for=fader id=range'.$element->id.'>'.$element->default_value.'</output>'; }else{ $new_field_type = 'number'; }</code></pre> <p>Then change the code after that to accommodate these changes, so I replaced what was there by this:<br /> <pre><code>$element_markup = <<<EOT <li id="li_{$element->id}" {$li_class}> <label class="description" for="element_{$element->id}">{$element->title} {$span_required}: {$rangeValue}</label> <div> <input id="element_{$element->id}" name="element_{$element->id}" min="{$element->range_min}" max="{$element->range_max}" step="100" hint="{$element->css_class}" class="element text {$element->size}" type=$new_field_type {$maxlength} {$quantity_link_data_tag} value="{$element->default_value}" {$input_handler} {$rangeUpdater} /> {$range_limit_markup} <script> function outputUpdate(vol{$element->id}) { document.querySelector('#range{$element->id}').value = vol{$element->id}; } </script> </div>{$guidelines} {$error_message} </li> EOT;</code></pre> <p>Any additions are very welcome.</p> <p>Also, adding all html5 field types to machforms, would be great. A switch/bollean field type would also work great. </p>