Anatomy

The section is a centered max-w-4xl column. A fade-in header holds the badge (Calculator icon + label), the h2, and an optional subtitle. Below it, a rounded card splits into two columns on md+ screens: the left column stacks the configurable sliders (label, current value, native range input, min/max hints); the right column, separated by a vertical border, shows the animated price and the billing period. A horizontal divider at the bottom of the card surfaces the included-features list as inline chips with Check icons, and a full-width pill button closes the card.

How it works

The heart of the component is a two-part reactivity chain. First, slider onChange handlers update a flat number[] state; useMemo recalculates the total each time that state changes, so the formula stays outside the render cycle. Second, an AnimatedPrice sub-component receives the computed value as a prop and feeds it to a Framer Motion useMotionValue. Whenever the prop changes, a useEffect fires animate(mv, value, { duration: 0.5, ease }) which drives the motion value from its current number to the new one. A second useEffect subscribes to display.on('change') and writes the rounded integer directly into a span's textContent, bypassing React's reconciler entirely for a silky-smooth counter animation with no re-renders.

How to build it in React

1. Model sliders as config objects

   Define a SliderConfig interface (label, min, max, step, defaultValue, pricePerUnit, unit) and accept a sliders prop. Initialize state from the defaults so adding or removing a slider never requires touching component logic.

   const [values, setValues] = useState<number[]>(
     () => sliders.map((s) => s.defaultValue)
   );

2. Derive the total with useMemo

   Compute the price outside the JSX with useMemo so the formula re-runs only when values or the slider configs change. This keeps the render function clean and makes the cost formula easy to unit-test.

   const totalPrice = useMemo(() => {
     return basePrice + sliders.reduce(
       (sum, s, i) => sum + (values[i] ?? s.defaultValue) * s.pricePerUnit,
       0
     );
   }, [basePrice, sliders, values]);

3. Animate the price with a motion value counter

   Create AnimatedPrice as a standalone sub-component. It holds a useMotionValue(0) and a derived display = useTransform(mv, Math.round). When the value prop changes, call Framer Motion's imperative animate(mv, value, { duration: 0.5, ease }) and write the result straight into a span ref, no state, no re-render.

   useEffect(() => {
     const controls = animate(mv, value, {
       duration: 0.5,
       ease: [0.16, 1, 0.3, 1],
     });
     return controls.stop;
   }, [value, mv]);

4. Style the range fill with a dynamic gradient

   Native range inputs hide their fill in most browsers. Pass a computed inline style with a linear-gradient that transitions from the accent color to the border color at exactly the slider's fill percentage. Derive that percentage from (value - min) / (max - min) * 100 and template it into the background property.

   style={{
     background: `linear-gradient(to right,
       var(--color-accent) ${pct}%,
       var(--color-border) ${pct}%)`,
   }}

When to use it

Reach for it on any SaaS landing page where pricing scales with usage: seats, API calls, storage, bandwidth. It removes the guesswork from tier-based tables and helps users self-qualify before hitting the sales team. Skip it for simple flat-rate or freemium products where a classic 2-column pricing card is faster to scan. On touch devices the component works fine with tap-drag on the sliders, but test on iOS Safari where range styling differs.

Used by

• Vercel, Uses an interactive slider to let users estimate compute and bandwidth costs before picking a plan.
• Twilio, Entire pricing section is a pay-as-you-go calculator; users input volumes and see a live cost estimate.
• Cloudflare, R2 and Workers pricing pages feature range-based estimators that update cost totals as you adjust request counts.
• Lemon Squeezy, Revenue slider estimates the platform fee dynamically, showing the exact cut before signup.

FAQ