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>
Here's the jQuery code that should be placed in the form's After Fields section on the Customize HTML page:
- 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:
Here's the modified HTML for the formatted sliders used in the demo form: