TileDownv0.5.10
Article

Price Calculator

A range slider that interpolates a price from a piecewise-linear set of breakpoints, entirely in the browser, with no network call.

Longer commitment, lower rate is a pricing shape that shows up everywhere: rent by the month, a subscription by the year, a service by the seat. The price-calculator tile turns a handful of quantity:price breakpoints into a live slider, computed entirely on the visitor’s device.

1 months –

Drag the slider. Between two breakpoints the price interpolates linearly; below the first or above the last, it clamps to that endpoint’s value. Authoring order does not matter, breakpoints sort by quantity automatically.

:::tile price-calculator
label: Monthly rent for your stay length
unit: months
currency: €
min: 1
max: 18
step: 1
breakpoints:
- 1:2000
- 12:1600
- 18:1500
:::

Why a tile, not a page hack

TileDown’s Markdown escapes raw HTML and script by design, so a one-off slider built by hand-embedding a <script> tag in content simply will not render. The price-calculator tile is a genuine engine feature: a Rendering conformer that emits scoped HTML, CSS, and JavaScript, tested the same way every other tile is.

  • No network call: the breakpoint table ships inline as data, the interpolation runs in the browser.
  • Multiple calculators on one page are independent; each reads its own data-td-price-breakpoints attribute.
  • label, unit, currency, min, max, and step all have sane defaults, so the minimal directive is just breakpoints.

Built for a real listing

This tile shipped for a long-term apartment rental site that needed "longer stays, lower rate" pricing without a backend. See the authoring reference for the full property list.

See markdown-profile.md for the complete tile syntax, or the config-reference on Codeberg for every option.

TileDown Updates

Stay updated with every exciting new feature we bring to TileDown, the Markdown-first way to build sites you truly own.

View Markdown source
index.md
---
title: Price Calculator
date: 2026-09-12
description: A range slider that interpolates a price from a piecewise-linear set of breakpoints, entirely in the browser, with no network call.
tags: Tiles, Pricing, Interactive
image: /assets/post-price-calculator.svg
imageDark: /assets/post-price-calculator-dark.svg
---
# Price Calculator

Longer commitment, lower rate is a pricing shape that shows up everywhere: rent by
the month, a subscription by the year, a service by the seat. The `price-calculator`
tile turns a handful of `quantity:price` breakpoints into a live slider, computed
entirely on the visitor's device.

:::tile price-calculator
label: Monthly rent for your stay length
unit: months
currency: €
min: 1
max: 18
step: 1
breakpoints:
- 1:2000
- 12:1600
- 18:1500
:::

Drag the slider. Between two breakpoints the price interpolates linearly; below the
first or above the last, it clamps to that endpoint's value. Authoring order does
not matter, breakpoints sort by quantity automatically.

```
:::tile price-calculator
label: Monthly rent for your stay length
unit: months
currency: €
min: 1
max: 18
step: 1
breakpoints:
- 1:2000
- 12:1600
- 18:1500
:::
```

## Why a tile, not a page hack

TileDown's Markdown escapes raw HTML and script by design, so a one-off slider
built by hand-embedding a `<script>` tag in content simply will not render. The
`price-calculator` tile is a genuine engine feature: a `Rendering` conformer that
emits scoped HTML, CSS, and JavaScript, tested the same way every other tile is.

- No network call: the breakpoint table ships inline as data, the interpolation
  runs in the browser.
- Multiple calculators on one page are independent; each reads its own
  `data-td-price-breakpoints` attribute.
- `label`, `unit`, `currency`, `min`, `max`, and `step` all have sane defaults, so
  the minimal directive is just `breakpoints`.

:::tile callout
title: Built for a real listing
body: This tile shipped for a long-term apartment rental site that needed "longer stays, lower rate" pricing without a backend. See the authoring reference for the full property list.
:::

See [markdown-profile.md](/docs/) for the complete tile syntax, or the
[config-reference on Codeberg](https://codeberg.org/TileDownHQ/tile-down/src/branch/main/docs/authoring.md#price-calculator)
for every option.