Tariff Slide

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.

Copy the tariff-slide folder from its package next to your page, link the stylesheets and mount it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="tariff-slide/tariff-slide.css">
<div id="tariff-slide"></div>

<script type="module">
  import { mount } from './tariff-slide/tariff-slide.mjs';

  const tariffSlide = mount(document.getElementById('tariff-slide'), {
    brand: 'Kestrel',
    headline: 'Slide to your size.',
    lede: 'Move the runner to the size you expect and read the price off the scale. You pay for that size and nothing else.',
  });

  // tariffSlide.update({ … });   change any option in place
  // tariffSlide.destroy();        and take it away again
</script>

mount(element, options)

Builds the block inside the element and returns its handle.

handle.value

What the page is saying now.

handle.setUnits(n)

Put the runner on a figure from outside; fires tariff-change like a hand would.

handle.setPeriod(p)

handle.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

Events it fires, which bubble from the element: tariff-change, tariff-choose.

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.

Made of: 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.

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.