proNew177 lines · framer-motion

Usage Pricing Slider

Drag the usage, watch the bill recompute in real time. A single pricing card with a usage slider and a tiered rate table; dragging the slider recomputes the bill across a base price and up to four usage tiers, with the estimate counting smoothly to the new value.

Use it for: Usage-based or metered pricing (API calls, seats-with-overage, storage) where a static price grid undersells how cheap low usage actually is.
Themes: Light + dark
License: Commercial use

Live

Usage-based pricing

Pay for what you call

Estimated bill$89.00/moGrowth rate

Usage50k requests / mo

01M+

Free tier
Free
Growth
$0.002/unit
Scale
$0.0012/unit
Enterprise
$0.0006/unit

tsx

"use client";

import * as React from "react";
import { motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

export interface UsageTier {
  /** Usage up to and including this amount (last tier should cover the max). */
  upTo: number;
  pricePerUnit: number;
  label: string;
}

export interface UsagePricingSliderProps {
  eyebrow?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Dragging the slider recomputes cost tier-by-tier from tiers and basePrice, and the active tier's chip highlights.
→The displayed estimate eases between the old and new value over ~260ms instead of snapping, so rapid dragging still reads clearly.
→The custom slider thumb and filled track are styled directly; no native <select> is used anywhere in the control.
→aria-valuetext on the range input spells out the usage, active tier and estimated bill together for screen readers.

Accessibility

✓The range input is a real, keyboard-operable `<input type="range">` with a descriptive `aria-valuetext`.
✓The animated price counter is visual only; the underlying value is always available as plain text.
✓Tier chips use border and fill, not colour alone, to show which tier is active.
✓Honours prefers-reduced-motion.