Anatomía

La sección es una columna centrada max-w-4xl. Un header con fade-in contiene el badge (icono Calculator + label), el h2 y un subtítulo opcional. Debajo, una tarjeta redondeada se divide en dos columnas en pantallas md+: la columna izquierda apila los sliders configurables (label, valor actual, input range nativo, indicaciones min/max); la columna derecha, separada por un borde vertical, muestra el precio animado y el periodo de facturación. Un separador horizontal en la parte inferior de la tarjeta presenta la lista de funcionalidades incluidas como chips inline con iconos Check, y un botón pill de ancho completo cierra la tarjeta.

Cómo funciona

El núcleo del componente es una cadena de reactividad en dos partes. Primero, los handlers onChange de los sliders actualizan un state number[] plano; useMemo recalcula el total cada vez que ese state cambia, de modo que la fórmula queda fuera del ciclo de render. Después, un subcomponente AnimatedPrice recibe el valor calculado como prop y lo pasa a un useMotionValue de Framer Motion. Cuando la prop cambia, un useEffect dispara animate(mv, value, { duration: 0.5, ease }) que lleva la motion value desde su número actual al nuevo. Un segundo useEffect se suscribe a display.on('change') y escribe el entero redondeado directamente en el textContent de un span, esquivando por completo el reconciliador de React para una animación de contador ultra fluida sin re-renders.

Cómo crearlo en React

1. Modela los sliders como objetos de configuración

   Define una interfaz SliderConfig (label, min, max, step, defaultValue, pricePerUnit, unit) y acepta una prop sliders. Inicializa el estado a partir de los valores por defecto para que añadir o quitar un slider nunca requiera tocar la lógica del componente.

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

2. Deriva el total con useMemo

   Calcula el precio fuera del JSX con useMemo para que la fórmula solo se vuelva a ejecutar cuando cambian values o las configs de los sliders. Así la función de render queda limpia y la fórmula de coste es fácil de testear de forma unitaria.

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

3. Anima el precio con un contador motion value

   Crea AnimatedPrice como subcomponente autónomo. Contiene un useMotionValue(0) y un display = useTransform(mv, Math.round) derivado. Cuando la prop value cambia, llama a la API imperativa animate(mv, value, { duration: 0.5, ease }) de Framer Motion y escribe el resultado directamente en un ref de span, sin state ni re-render.

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

4. Estiliza el relleno del range con un gradiente dinámico

   Los inputs range nativos ocultan su relleno en la mayoría de los navegadores. Pasa un estilo inline calculado con un linear-gradient que pasa del color de acento al color de borde justo en el porcentaje de relleno del slider. Deriva ese porcentaje de (value - min) / (max - min) * 100 e insértalo en la propiedad background.

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

Cuándo usarlo

Úsalo en cualquier landing SaaS donde el precio escala con el uso: puestos, llamadas a la API, almacenamiento, ancho de banda. Elimina la incertidumbre de las tablas por niveles y ayuda a los usuarios a autocalificarse antes de contactar con el equipo comercial. Evítalo en productos de tarifa plana simple o freemium donde una tarjeta de precios clásica de 2 columnas es más rápida de leer. En dispositivos táctiles el componente funciona bien arrastrando con el dedo los sliders, pero pruébalo en Safari de iOS, donde el estilo de los range difiere.

Usado por

• Vercel, Usa un slider interactivo para que los usuarios estimen los costes de cómputo y ancho de banda antes de elegir un plan.
• Twilio, Toda la sección de precios es una calculadora de pago por uso; los usuarios introducen volúmenes y ven una estimación de coste en directo.
• Cloudflare, Las páginas de precios de R2 y Workers incluyen estimadores basados en range que actualizan los totales de coste a medida que ajustas el número de solicitudes.
• Lemon Squeezy, Un slider de ingresos estima dinámicamente la comisión de la plataforma, mostrando el porcentaje exacto antes del registro.

FAQ