Back to UI Elements
ui-008
Count-Up Pricing Slider
£5 Standard License Unlimited projects
Range slider whose price counts up and down through a numeric proxy tween as you scrub between tiers.
About This Component
Range slider whose price counts up and down through a numeric proxy tween as you scrub between tiers. A single self-contained component: one HTML file, one stylesheet, one script, vanilla JavaScript and GSAP, no framework. Ships in three looks, vault, brutal and corporate, switched with one data-variant attribute; the script is identical in all three.
What's Included
- Native <input type="range">, keyboard accessible by default
- Price counts up through a GSAP numeric proxy tween
- Math.round on every update, so the digits never stutter
- Tiers are a small data array: label and price per step
- No plugins, GSAP core only
- Three shipped variants: vault, brutal, corporate
Perfect For
- SaaS pricing pages with seat or usage sliders
- Calculators and quote widgets
- Plan comparison tools
How It Works
Numeric proxy tween
The slider's input event tweens a plain object {val} toward the new tier price; onUpdate writes Math.round(val) into the price element, so the number animates without layout jitter.
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates