Display Range Slider as Currency


This snippet is an updated version of the example found on the Formidable Knowledge Base JavaScript examples page: https://formidableforms.com/knowledgebase/javascript-examples/#kb-format-a-slider-field-value-as-a-currency.

The KB example works for one slider at a time. This version works for multiple sliders on a single page. It also uses the JavaScript standard built-in Intl.NumberFormat object. This object enables language-sensitive number formatting.

To use this snippet, follow the same directions as found in the KB article with a couple of exceptions. The HTML needs to be modified to use the [key] shortcode to make the code generic, and the CSS needs to be modified to apply to multiple sliders.

For the custom HTML in Step 1, drop the following span into each slider on the page as instructed in the KB article directly after the [input] shortcode:

<span id="field_[key]_display" class="frm_range_value_currency">$50</span>

Demo Form

Multiple Range Slider Currency Demo
Min: 0 | Max: 100 | Incr: 1
Min: $1,000 | Max: $10,000 | Incr: $500
Min: $10,000 | Max: $100,000 | Incr: $1,000


Here's the jQuery code that should be placed in the form's After Fields section on the Customize HTML page:

Final tips:

  • don't forget to add the multiple slider ids to the recommended CSS from the KB article. (Step 2)
  • the field descriptions for the demo sliders are moved to a position above the [input] shortcode on the form's Customize HTML page


Here's the modified CSS:

Customize HTML

Here's the modified HTML for the formatted sliders used in the demo form:

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *