Skip to the object
TACTILE UI

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.

Everything you set here is what the Code and Prompt tabs give you.

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

  1. 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.
  2. 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.
  3. ReleasedWithin 7px of a 1, 2 or 5 mark the runner settles on it in 160 ms; otherwise it stays, on its two-significant-figure figure.
  4. 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.
  5. 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”.
  6. 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.
  7. Plan keyA card's key links to the configured href and fires tariff-choose with the plan, the figure, the price and the billing.
  8. TabletThe readout on its own row, lamps and lever below; two cards a row.
  9. 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.
  10. Reduced motionThe runner, the lever, the price scale and the cards move without transitions.

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”. 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.