Pricing Slider

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

3. Add the component markup:

Copy the [data-pricing-slider] block from index.html (it is marked with <!-- Component starts here -->). It needs:

• [data-pricing-slider] root, optionally with data-start="1", data-billing="monthly" and data-currency="£"
• a head showing [data-ps-tier], [data-ps-seats], [data-ps-price], [data-ps-period] and the [data-ps-popular] badge
• the billing role="radiogroup" with [data-ps-seg-pill] and two [data-ps-bill="monthly|annual"] buttons, plus [data-ps-save] holding [data-ps-save-value]
• the rail: [data-ps-input] (a real <input type="range">) before [data-ps-track], which holds [data-ps-fill], [data-ps-ticks] and [data-ps-thumb]
• [data-ps-bubble] > [data-ps-bubble-inner] > [data-ps-bubble-tier] and [data-ps-bubble-price]
• [data-ps-tiers]: the tier list, one [data-ps-tier-option] per tier
• [data-ps-features] for the feature list and a role="status" element with [data-ps-live]

Everything except [data-ps-input], [data-ps-track], [data-ps-fill], [data-ps-thumb] and [data-ps-tiers] is optional: drop the billing switch, the bubble, the badge or the feature list and the script simply skips it. The .ps-cta button is plain markup with no hook — wire it to your own checkout.

The tier list is the data. Each option carries data-key, data-label, data-seats, data-monthly, data-annual, an optional data-popular, and a pipe-separated data-features. Nothing is hard-coded in the script: edit a price in the markup and the headline, the bubble, the legend, the ticks and the savings badge all follow.

Using It With Your Own Design

What the component needs from your markup: the data attributes above, and the range input as the first child of .ps-rail (the focus ring is a sibling selector on it). Ticks and legend positions are computed, so any number of tiers works.

What is only the demo's furniture: the fixed toolbar strip at the top of index.html (its prompt, the Reset button and the Light/Dark toggle, plus their CSS and inline script), the .stage / .stage__inner wrapper that centres the card on the grey ground, and the Google Font link. None of it is part of what you bought. Delete all of it and drop .pricing-slider straight into your own page.

CSS the component depends on: do not put a CSS transform on [data-ps-thumb], [data-ps-bubble-inner], [data-ps-seg-pill] or the tick dots — GSAP owns those, and a CSS transform underneath one is read as a pixel offset it never returns from. Keep --ps-thumb-size defined on the root: the script reads it at use time to map the value to a pixel, and the native range thumb is sized from the same property so the painted thumb and the real one stay on top of each other. Under .has-js the rail is shown and the legend becomes absolutely positioned markers; without JavaScript the rail is hidden and the same list renders as a plain price table.

What's Included

• index.html: the component alone on the demo ground, with the theme toggle
• assets/style.css: component CSS and both themes, every colour as a custom property
• assets/script.js: readable GSAP core source with the keyboard model, cleanup and the public API
• assets/script.min.js: minified production script
• thumbnail.html: build-only capture state

Themes

One design at two token values. data-variant on <body> in the demo, or on the component's own owning root in a product page:

Code snippet omitted: it ships with the download.

light is the default; dark is the same layout, spacing and motion with the tokens re-valued. There is no third look, and the JavaScript never reads the attribute name — if it needs a colour it reads the custom property at use time, so a theme switch cannot leave the component holding a stale value. The component re-measures itself when the attribute changes, so a theme with different padding or fonts still lines its ticks up.

Both blocks in assets/style.css define the same list, and that list is the whole surface:

• Ground (demo furniture only): --ground, --ground-2, --raised, --hover
• Ink: --ink, --ink-2, --ink-3
• Lines and elevation: --line, --line-strong, --shadow, --shadow-sm
• Accent: --accent, --accent-ink, --accent-wash, --accent-ink-soft, --accent-hover
• Status: --good-wash, --good-ink (the savings badge; muted, and used only for status)
• Component surfaces: --track, --thumb-bg, --seg-bg, --seg-pill-bg, --bubble-bg, --bubble-ink
• Type and radii: --font, --radius, --radius-sm, --radius-xs

To re-value it for your own brand, change those properties — not the rules under them. The usual edit is one line: set --accent (and --accent-hover, --accent-wash, --accent-ink-soft alongside it) to your brand colour and leave everything else alone.

How It Works

One state object, one render pass. The component holds {pos, mix}: the fractional position along the tiers, and the blend between the monthly and annual price. The thumb, the fill, the bubble, the headline number and the tick highlights are all written by a single render function reading that state, and GSAP only ever tweens the state. A settle, a billing switch and a keyboard press therefore cannot leave anything holding a stale value.

Magnetic snap, spring settle. While you drag, the raw value is biased toward the nearest tick by an amount that grows as you approach it, so the thumb is drawn in rather than sticking. On release the position tweens to that tick with an elastic ease, and the price counts through the overshoot with it.

The number never jumps. The price is interpolated between the surrounding tiers and then blended between the monthly and annual figure, so scrubbing and switching the billing period animate the same digits. The savings percentage is derived from the tier data at load and written into the badge; it is never copy.

A native range under a painted one. The control is a real <input type="range"> at opacity zero over the painted track, so pointer, touch and assistive technology all get native behaviour. Keys are handled explicitly so an arrow moves a whole tier rather than one thousandth of the range.

Public API and events. The first instance is exposed as window.pricingSlider (each root also carries its own as root.pricingSlider):

Code snippet omitted: it ships with the download.

The root dispatches three bubbling CustomEvents, each with the tier in detail:

Code snippet omitted: it ships with the download.

Pass { animate: false } to set or setBilling to apply without motion, and { silent: true } to apply without announcing or emitting.

Accessibility

• The control is a native <input type="range">, so it is one tab stop, is exposed as a slider, and works with pointer, touch and assistive technology without a custom widget.
• Keys: Left/Down move one tier down, Right/Up one tier up, PageDown two down, PageUp two up, Home the cheapest tier, End the most expensive. All are handled explicitly and clamped to the ends.
• Announcement: aria-valuetext is rewritten on every change to the tier name, its price, the billing period and the seat count, so a screen reader says "Studio, £99 per user per month, 20 developers" rather than "2". aria-valuenow, aria-valuemin and aria-valuemax carry the tier index rather than the fractional drag position.
• Settling on a tier also writes to a polite role="status" region, which covers the case where the value change came from a drag or the API rather than a key.
• The billing switch is a role="radiogroup" of two role="radio" buttons with a roving tabindex: one tab stop, arrow keys and Home/End move between them, and aria-checked follows the selection immediately rather than waiting for the price tween.
• The value bubble appears on focus as well as on pointer and touch, and is aria-hidden because everything in it is already announced.
• The legend under the track is a pointer shortcut, not a second tab stop: every tier is reachable from the slider itself and from the API.
• Coarse pointers get a 34px thumb, a 52px rail, 44px switch buttons and a bubble that lingers after release. Nothing in the component is hover-only.
• Under prefers-reduced-motion: reduce the tier changes, the billing switch and the bubble all apply instantly, with no snap spring, no ping and no stagger.
• Without JavaScript the rail is hidden and the tier list renders as a readable price table, so the page still sells the plans.

Requirements

• GSAP 3.12+ (the demo uses 3.15.0; core only, no plugins)
• No build step, no framework