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

Block · With a Pass · https://tactileui.dev/blocks/tariff-slide

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## 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

## States

1. **At rest**: The 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. **Dragging**: A press anywhere on the rule puts the runner there and a drag moves it.
3. **Released**: 
4. **Keyboard**: The runner is role=slider with aria-valuenow and words in aria-valuetext.
5. **Annual**: saves $M”.
6. **Talk to us**: Past 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 key**: A card's key links to the configured href and fires tariff-choose with the plan, the figure, the price and the billing.
8. **Tablet**: The readout on its own row, lamps and lever below; two cards a row.
9. **Phone**: Everything stacks.
10. **Reduced motion**: The runner, the lever, the price scale and the cards move without transitions.

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