Pricing · Hours calculator

A centered card with a slider for monthly hours and four price tiers charged step by step: the total and the average price per hour update as you move it.

See it live: Pricing · Hours calculator on fancybricks.co — the live preview, and the button that copies it.

Or open the preview on its own — narrow the window to see it on a phone — and in dark mode.

In the builder

Preview on the front end. Scripts don't run inside the builder, so here you only see the layout: the slider shows still at the start value and the figures as written (60 hours, $3,490); the script runs on the front end. Save and open the page to see the full result.

Structure

This is what the Bricks Structure panel shows after you paste the template. Component instances say which component they are.

Pricing · Hours calculator
  Container
    Intro   (FBK Intro)
    Plan
      Calculator card   (FBK Card)
        Calculator   (FBK Price calculator)
          Tier · 1–49 hours   (FBK Price tier)
          Tier · 50–99 hours   (FBK Price tier)
          Tier · 100–149 hours   (FBK Price tier)
          Tier · 150+ hours   (FBK Price tier)
        Button   (FBK Button)
    Calculator (JS)

The template also pastes a dashed note above the section, with the short version of this page. It only shows inside the builder, never on the published page — see Builder notes.

FBK Price calculator

This template is built on its own component, FBK Price calculator: select it in the Structure panel and everything below is in its Properties.

A price calculator with a slider: the visitor picks an amount (people, seats, hours…) and sees the tier, the price per unit and the total. Put one FBK Price tier per tier in the Tiers slot; every number and word is a property. Needs the template's Calculator (JS) code block (CALC_JS).

FBK Price calculator in the Bricks panel: its own properties are at the top.

Slider

• Field name: What the slider counts. It is also the slider's name for screen readers.
• Start value: Where the slider starts. Write the Total texts for this value too: the builder and a browser without JavaScript show them as written.
• Minimum
• Maximum
• Step: How much one move of the slider adds (1, 5, 100…).
• Unit: After the number: people, seats, hours, GB…
• Unit for one
• Hide minimum and maximum

Total

• Total label
• Total, as written: The total for the start value (the script works it out on the page).
• Price per unit, as written
• Period

Sentences

• Price per unit sentence: The script writes it under the total; {price} is the price per unit.
• Saving sentence: Added when the price is lower than the first tier's; {save} is the amount. Leave a space to show no saving.
• Read after the total: Screen readers hear 10 people: $100 per month when the slider stops.

Style

• Pricing: Volume: every unit at the price of the tier reached. Graduated: each tier charges its own units (1–9 at the first price, 10–24 at the second…); the price per unit is the average.
• Motion: The tier line slides, the total counts to its new figure and the thumb grows a little under the mouse (class fbk-pcalc--motion). Off: instant changes.

How to adjust

Every step is the same move: pick the element in the Structure panel, change its Properties.

Where are those panels?

How to adjust a template shows every one of them in a screenshot of the real builder: the Structure and Properties panels, the classes on an element, a component's style families and the field where a CSS variable goes.

The classes this element carries, in the Bricks panel.

This template's own component, with its Style group open.

1. Paste the template in Bricks first — see Copy and paste.
2. Select Intro (FBK Intro) › Properties: Eyebrow, Hide eyebrow, Title, Title level, Lead, Hide lead · Style group: Eyebrow style, Highlight, Title size, Accent line · Layout group: Alignment, Layout, Background, Spacing · Motion group: Reveal in slider.
3. Select Calculator card (FBK Card) › Properties: Title, Title level, Text, Hide text · Style group: Highlight, Title size, Look, Tone, Shape, Photo overlay, Padding, Photo hover, Background · Layout group: HTML tag, Layout.
4. Select Calculator (FBK Price calculator) › Properties: Slider group: Field name, Start value, Minimum, Maximum, Step, Unit, Unit for one, Hide minimum and maximum · Total group: Total label, Total, as written, Price per unit, as written, Period · Sentences group: Price per unit sentence, Saving sentence, Read after the total · Style group: Pricing, Motion.
5. Select Tier · 1–49 hours, Tier · 50–99 hours, Tier · 100–149 hours (+1 more) (FBK Price tier) › Properties: Range, Price, Starting tier.
6. Select Button (FBK Button) › Properties: Text, Link, Tone, Shadow on hover · Icon group: Icon, Icon position · Style group: Style, Size, Width, Hover effect.

Requirements

• Code execution. Needs "Execute code" enabled for the role in Bricks → Settings → Custom code, or the JS block shows as plain text instead of running.

What each requirement is, and how to set it up once for the whole site: Requirements.

Finish by hand

• The calculator is the FBK Price calculator component (the same as Pricing · Team calculator), here with Pricing Graduated: hours 1–49 at $60, 50–99 at $50 and so on, added up; the price per hour under the total is the average. Every number and sentence is a property; write the Total texts for the start value (the builder shows them as written).
• Tiers: one FBK Price tier per tier in the Tiers slot, from the lowest; the first number of its Range text is where it starts and its Price text the price per hour. Add or remove tiers freely; mark the tier of the start value as Starting tier.
• Slider: Minimum 10, Maximum 200 and Step 10 (properties). Colors and time: --fbk-pcalc-fill, --fbk-pcalc-track, --fbk-pcalc-panel and --fbk-pcalc-swap on .fbk-pcalc; Motion option for the sliding line and the counting total.
• The card column is 46em wide at most (.fbk-hourcalc).

On phones

The template is designed desktop first, the Bricks default, and only changes at the two widths the library uses:

• 991px and below — .fbk-intro.
• 767px and below — .fbk-section.

Those changes live in Bricks' own breakpoint fields, so you edit them where you always do: pick the breakpoint in the toolbar and the same fields follow.

Careful with the classes shared by the whole library (fbk-section, fbk-intro, the component classes): a change there shows up in every template that uses them.

If your site's breakpoints are set up mobile first, copy the mobile-first variant of the template instead — see Copy and paste.

Accessibility

In this template, keyboard focus is visible on every interactive piece; movement is cut back when the visitor's system asks for less motion; the state screen readers need is already set (aria-hidden, aria-label, aria-live).

What is checked on every template, and what depends on your own palette: Accessibility.

Dark mode

With your site in dark mode this section turns dark too — the class fbk-section--auto-dark on the section does it. Remove the class to keep it light.

Its background is a modifier on the section, so you can swap it for any of the ones the template is checked with: fbk-section--soft, fbk-section--light, fbk-section--dark.

How the library follows your site's color scheme: Dark mode and preview.