Sliding Savings Calculator

Oh, that’s easy. Create a form project with the default calculator type. Save project and create a group of fields. Put two fields there: calculatorSum and qf_range. In the qf_range field in the math parameter, insert v. This will mean the value of the field. Save and publish the form to the page.

Use the settings of your fields to customize them. Use the customHtml field and the css file to get the design you need.

You will get the same thing as in the example shown. After that, you will be able to change the calculator as you need. I can help with that if there are more pointed questions. It will be very good if I can see what you are doing on the site.

Thanks for the response. I added the fields, but don’t see the math parameter for qf_range

Good. Unfortunately, I don’t see an option to attach a screenshot here. I’ll try without it.

Click on the settings of this field, you will see a window with two tabs on the left side. These will be params and calculator. Open the calculator and insert the value there.

Ok I found the math parameter. I saved and clicked publish. How do I add it to the page to view it, am I adding it as a shortcode?

The link to the site I am working on is nowpayzero.com

Yes. Open the page with the list of projects. In the right part there will be shortcodes in the table.

Unfortunately, my answers here are published with a delay. I hope the moderators will fix this and I will be able to respond promptly. Big apologies.

Ok I tried adding the plugin code that was provided under projects into the short code widget in Elementor and the actual code is populating instead of a calculator. I wish I could screenshot and attach in my reply to show what is going on to give better explanations because I am lost.

Unfortunately, I can’t tell you how to work with Elementor. I don’t use it.
To demonstrate the screenshot, upload it to any file storage, then show the link here.

So when I viewed the page it is now showing! But it is showing an error in the calculation (I would like to have the sliding value of the credit card processing volume to be multiplied by 3%) and I would like the Credit Card Processing Volume to be under the slider and the Potential Annual Savings to take its place.

Here is link to the screen shot: Screenshot

What did you add to the math parameter of the field?, please tell me. If you want to show 3%, then add v*3/100.

If you want to swap the fields, just drag them in the admin panel. They are dragged with the mouse. Then click save.

Thank, I updated the math parameter and it is now showing 3% as I want and I swapped the fields as needed too. The only other issue is the number on the slider button is broken up in two lines, is there a way to fix that? Here’s the screenshot for example

Also, is there a specific guide or video somewhere I can take a look at for the css or customHtml that I can incorporate? I am not knowledgeable about either CSS or HTML coding

If you want to make the design what you need, then css is necessary. Now you can do the following.

Open the project settings and create a css file, such as “slider.css”. Leave the copy styles checkbox enabled. Then, in the /wp-content/plugins/quickform/site/assets/css/slider.css file, find line 604 like this: .qf3form.slider .qfslider .slider_chosen.
Add this style:

white-space: nowrap;

If this is difficult, you need to ask for help. You can’t change the design without css knowledge.

Where do I go to find this file:
/wp-content/plugins/quickform/site/assets/css/slider.css file

Ok I should be close to the finish line. I was able to add the nowrap in Inspect Element. Is it possible to add commas to the numbers in the sliders (i.e. 50,000, etc.) and also move the 1,000,000 up on the end of the slider so that it is not directly on the slider and is inline with the 50,000.

Also how can I change the background color of the entire section from white and also change the text color?

Here’s a current screenshot

I sincerely appreciate all your assistance!

I’m sorry, but working with the plugin involves some initial preparation. I can’t tell you how to change the text color. Perhaps if you have a question on js or php, or you will develop a complex form with difficult math and a complex interface, then I will give you help.
But now you are asking as a person who first encountered a webinteface. Perhaps you should look for a simpler solution. This plugin is for professionals.