Tariff Slide
A pricing section made as a slide rule. Drag the glass runner along a logarithmic usage scale and read the price off the scale beneath; the plan lamp lights, and a lever slides the price scale to its annual place.
What it is for
The pricing page of a product sold by size (requests, events, seats) where the honest answer to “what will it cost me?” is “it depends how big you are”.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- Logarithmic slide rule scale, Graduated tariff inverted for scale, Sliding price scale on billing lever, Aria slider with valuetext, Snap to 1 2 5 marks, Plan lamp row, Vacuum fluorescent readout, Tariff change event, Container query layout, Finish following
- Stack
- Vanilla ES modules, CSS
- Needs
- Nothing, no dependencies
- States
- 10 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- At restThe runner stands on its figure; the readout shows the price and the plan; one lamp lit; the matching card lifted with the dark key; nothing runs.
- DraggingA press anywhere on the rule puts the runner there and a drag moves it; the figure, price, lamp, band and card follow; a mark within 3px holds it. tariff-change fires as the plan or price changes.
- ReleasedWithin 7px of a 1, 2 or 5 mark the runner settles on it in 160 ms; otherwise it stays where it is let go, its figure rounded to two significant figures.
- KeyboardThe runner is role=slider with aria-valuenow and words in aria-valuetext. Arrows step 1, 1.2, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8 of each decade; PageUp and PageDown go to the next 1-2-5 mark; Home and End to the ends.
- AnnualThe lever throws over in 240 ms; the price scale glides to its annual places over 460 ms; the readout shows the monthly figure at 80% and “Billed $N a year · saves $M”.
- Talk to usPast the last band the readout says “Talk to us”, the fourth lamp lights, and no price is claimed; price is null in the event.
- Plan keyA card's key links to the configured href and fires tariff-choose with the plan, the figure, the price and the billing.
- TabletThe readout on its own row, lamps and lever below; two cards a row.
- PhoneEverything stacks; the rule keeps the decade figures only, band names are dropped; cards are one column with 46px keys; the rule stays draggable and the page still scrolls.
- Reduced motionThe runner, the lever, the price scale and the cards move without transitions.
Notes
The visitor finds their size by using the instrument, and the graduated tariff explains itself: the price is continuous across the plan bands, the lamp says which plan they are in, and the annual saving is a lever that visibly moves the price scale. Emits tariff-change and tariff-choose for your checkout. CSS and a little DOM, no dependency, both finishes.
Original composition. The product (Kestrel), its tiers, plans and every figure are invented example figures, not Tactile UI's prices. The rule, runner, lever and lamps are CSS drawn here, in the kit's tokens; no image. Faces: Instrument Sans and Geist Mono (SIL OFL 1.1), the kit's own.
Anatomy
Logarithmic slide rule scale, Graduated tariff inverted for scale, Sliding price scale on billing lever, Aria slider with valuetext, Snap to 1 2 5 marks, Plan lamp row, Vacuum fluorescent readout, Tariff change event, Container query layout, Finish following
Usage notes
The pricing page of a product sold by size (requests, events, seats) where the honest answer to “what will it cost me?” is “it depends how big you are”. The visitor finds their size by using the instrument, and the graduated tariff explains itself: the price is continuous across the plan bands, the lamp says which plan they are in, and the annual saving is a lever that visibly moves the price scale. Emits tariff-change and tariff-choose for your checkout. CSS and a little DOM, no dependency, both finishes.
Options
| Option | Type | Description |
|---|---|---|
| brand | text | Set small above the headline. |
| headline | text | Headline |
| lede | text | Lede |
| metric | enum | What the usage scale counts. Both are logarithmic. |
| units | number | 0 starts where the scale does. Any other figure is rounded to two significant figures and kept inside the scale. |
| period | enum | Billing shown first |
| symbol | text | The figures are in whatever currency you mean; edit the tiers in tariff-slide.mjs. |
| ctaHref | text | Only http(s), a path or a fragment. A key also fires tariff-choose. |
| finish | enum | Auto follows the page’s data-finish, then the visitor’s system. |
Methods
- value
- setUnits
- setPeriod
- update
- destroy
How it works
Original composition. The product (Kestrel), its tiers, plans and every figure are invented example figures, not Tactile UI's prices. The rule, runner, lever and lamps are CSS drawn here, in the kit's tokens; no image.