Display Range Slider as Currency

Summary

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

Snippet

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

CSS

Here's the modified CSS:

Customize HTML

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