---
title: "Pricing usage slider"
description: "A usage slider with an estimated monthly bill that splits into the base plan and each rate band."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/pricing-usage-slider
---

# Pricing usage slider

A usage slider with an estimated monthly bill that splits into the base plan and each rate band.

The slider moves through fixed stops that grow about tenfold every third step, one stop per arrow key, with labels on the decades. The bill beside it lists the plan and each rate band in use, with the total and the rate it works out to per 1,000. Past the last priced stop it hands over to sales. Screen readers hear the estimate when a drag or key press settles, not at every stop it passes.

A Pro block built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/pricing-usage-slider
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, button, card, separator, slider, table, text-link

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More pricing blocks

All 4, with install commands: https://ui.edbn.me/docs/blocks/pricing · https://ui.edbn.me/docs/blocks/pricing.md

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt