Pricing calculator

[Helix-Editing]

Hi everyone, I’m hoping someone can help with a couple of things for a pricing calculator I’m working on. Here’s the read-only link: Webflow - last draft (hopefully)

It looks like the calculator isn’t working on the read-only link, so I’ve attached a picture of the published site.

1. I’ve coded the range slider at the bottom to output a dollar amount as well as text on the right side of the screen based on what the slider is set to (“Standard 5-day delivery $0,” etc.). Does anyone know how to edit the code so the text that’s output will be all the way to the left and aligned with the other text above/below it, while keeping the dollar amount that’s output all the way to the right to stay aligned with the other numbers above/below it?

2. Does anyone know how to create a code for the line “Estimated tax” that I’ve made on the right side such that the output is the subtotal thus far * 8.875%, as well as how to code for the “Order Total” line such that the output is the sum of the values above it?

If you could help with any aspect, I’d really appreciate it - thanks in advance!

[memetican (Michael Wells)]

@Helix-Editing

Does anyone know how to edit the code so the text that’s output will be all the way to the left and aligned with the other text above/below it, while keeping the dollar amount that’s output all the way to the right to stay aligned with the other numbers above/below it?

In general, use Webflow to manage your elements and layout as much as possible. Use your custom code just to calculate and update the content of those elements.

@Helix-Editing

Does anyone know how to create a code for the line “Estimated tax” that I’ve made on the right side such that the output is the subtotal thus far * 8.875%, as well as how to code for the “Order Total” line such that the output is the sum of the values above it?

It will just be simple math, like tax = subtotal * 0.08875. and then format it as currency.

I’m not clear on whether you’re stuck with the math calculation and UI-updating process, or whether it’s the overall process of doing the calculation refresh as you form values change. It’s not complex, but there are a few moving parts.

If you’re learning JS I’d recommend you find a simple JS-based calculator tutorial and walk through it to understand the basic pieces involved and how to connect them.

You could also look down the route of a solution like HTMX.