Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
/* this code is a multi-selector variation of the example found
* in Formidable's knowledge base article:
* it uses the Intl.NumberFormat function that's built into JavaScript. No external libraries required.
* to learn more about Intl.NumberFormat see:
$("#field_id1 ~ .frm_range_value, #field_id2 ~ .frm_range_value").on('DOMSubtreeModified' , function() {
var field_id = $(this)[0],
target_elem = '#' + field_id,
target_span = target_elem + '_display',
formatted_html = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
maximumFractionDigits: 0,
}).format( $(target_elem).val() );
$(target_span)[0].innerText = formatted_html; // add the currency symbol
var event = new Event("change");
<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
<label for="field_[key]" id="field_[key]_label" class="frm_primary_label">[field_name]
<span class="frm_required" aria-hidden="true">[required_label]</span>
[if description]<div class="frm_description" id="frm_desc_field_[key]">[description]</div>[/if description]
<span id="field_[key]_display" class="frm_range_value_currency">$50,000</span>
[if error]<div class="frm_error" role="alert" id="frm_error_field_[key]">[error]</div>[/if error]
/* add styling for the new span */
.frm_range_value_currency {
/* add additional sliders to the KB CSS. */
#field_demo_slider1 ~ .frm_range_value,
#field_demo_slider2 ~ .frm_range_value {
display:none !important;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment