How to create a slider with calculation?

  • REPYYC
    Asked on September 19, 2024 at 5:56 PM

    I have a calculator on my page What are realtor fees? and am looking to create the same thing with Jotform, is there a similar slider, and how do I get this code in there? I can't seem to get it to work.

    IF({Sale Price} <= 100000, {Sale Price} * 0.07, (100000 * 0.07) + (({Sale Price} - 100000) * 0.03) )

  • Gian_D JotForm Support
    Replied on September 19, 2024 at 6:48 PM

    Hi Cody,

    Thanks for reaching out to Jotform Support. You can use the Fancy Range Slider widget and the Form Calculation widget to replicate the slider on your website. I created a sample form with the solution on it. Check out the screencast below:

    How to create a slider with calculation? Image 1 Screenshot 80

    As you can see, I was able to replicate the slider on your website. You can clone my demo form as a reference, or you can do it on your end. Let me show you how to do it:

    First, let's add the Fancy Range Slider, and the Form Calculation widgets to your form:

    1. In Form Builder, click on Add Element on the upper left side of the page.

    How to create a slider with calculation? Image 2 Screenshot 91

    2. Click on the Widgets tab.
    3. Drag and drop a Form Calculation widget on your form.

    How to create a slider with calculation? Image 3 Screenshot 102

    4. Search for Fancy Range Slider.
    5. Drag and drop a Fancy Range Slider widget on your form.

    How to create a slider with calculation? Image 4 Screenshot 113

    Now, let's configure your Fancy Range Slider widget:

    1. Click on the Wand icon of your Fancy Range Slider widget.
    2. In Slider Type, select Single.
    3. In Minimum Range Value, enter 0.
    4. In Maximum Range Value, enter 2000000.
    5. In Starting Value, enter 1000000.
    6. In Stepping Value, enter 25000.

    How to create a slider with calculation? Image 5 Screenshot 124

    After that, let's configure your Form Calculation widget to perform a calculation:

    1. Click on the Wand icon of your Form Calculation widget.

    How to create a slider with calculation? Image 6 Screenshot 135

    2. Copy the Form Calculation widget settings below:

    How to create a slider with calculation? Image 7 Screenshot 146

    That's it. Let us know if you have any other questions.

Your Answer