Free Section

Interactive Pricing Calculator

A dynamic pricing slider allowing users to estimate monthly bill based on monthly active users, featuring a yearly discount toggle and feature tier breakdowns.

light
pricing
calculator
slider
interactive
saas

The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<section class="calc-section">
  <div class="calc-head">
    <span class="eyebrow">Predictable Pricing</span>
    <h2>Pay only for what you use</h2>
    <p>Scale your plan seamlessly as your business grows.</p>
  </div>

  <div class="calc-card">
    <div class="billing-switch">
      <span class="billing-opt active" id="btnMonthly">Monthly</span>
      <button class="toggle-pill" id="billingToggle" aria-label="Toggle annual billing discount">
        <span class="toggle-thumb"></span>
      </button>
      <span class="billing-opt" id="btnYearly">Yearly <small class="save-tag">20% OFF</small></span>
    </div>

    <div class="slider-group">
      <div class="slider-header">
        <span>Monthly Active Users</span>
        <strong id="usersDisplay">50,000 MAU</strong>
      </div>
      <input type="range" id="mauSlider" min="5000" max="250000" step="5000" value="50000" class="mau-range" aria-label="Monthly Active Users" />
      <div class="slider-ticks">
        <span>5k</span>
        <span>50k</span>
        <span>100k</span>
        <span>250k+</span>
      </div>
    </div>

    <div class="calc-divider"></div>

    <div class="price-summary">
      <div class="price-val-wrap">
        <span class="currency">&#8377;</span>
        <strong id="priceDisplay">1,999</strong>
        <span class="period" id="periodDisplay">/ month</span>
      </div>
      <p class="bill-note" id="billNote">Billed monthly. Cancel anytime.</p>
      <a href="#" class="calc-cta-btn">Start 14-day Free Trial &rarr;</a>
    </div>

    <ul class="features-checklist">
      <li>&#10003; Full platform access with zero limits</li>
      <li>&#10003; 99.95% guaranteed SLA uptime</li>
      <li>&#10003; Dedicated Slack support channel</li>
    </ul>
  </div>
</section>

The AI prompt

Paste this into an AI coding tool to generate the same section, then ask it to adapt the colours, text or framework to your project.

Works with Claude · ChatGPT · Cursor · v0 · Bolt · Gemini

Create an interactive SaaS pricing calculator section with an active user range slider and billing discount switch.

Requirements:
- Centered header with subtitle on a subtle grey background.
- A card container (max 560px wide) with a monthly/yearly toggle pill (20% OFF discount badge on yearly).
- An <input type="range"> slider for Monthly Active Users from 5k to 250k with tick markers.
- Dynamic price formula in Indian rupees that updates instantly on slider input or annual billing switch.
- Calculated price formatted with toLocaleString("en-IN").
- Primary pill button "Start 14-day Free Trial" with subtle hover lift and shadow.
- Feature checklist below the CTA with check marks.

Return one HTML file with <style> and <script> tags.

How to build it, step by step

1
Set up an input range slider for user volume with accessible labels.
2
Write a pricing function that computes cost based on slider value and applies a 20% discount if annual is selected.
3
Format numerical outputs with toLocaleString() for readability.
4
Update text labels dynamically on slider input and toggle click.
5
Style the range thumb and track with accent-color: #2506ad.

Customisation tips

Use step increments on the slider so numbers round to clean milestones (e.g. 5,000 MAU).
Highlight the annual discount badge with high contrast green to encourage yearly subscriptions.
Provide reassurance copy ('Cancel anytime') directly beneath the total price.