Dumbbell Range

Component 3

About

Want this built into your product? AI agents write the code, an engineer directs them: https://vibecoding.tech/services?utm_source=21st&utm_medium=component Book a call and say promo code 21ST to get a free 3-day development trial. Two endpoints per row joined by a connector on a shared zero-based scale — the dumbbell genre for paired values like min/max or input/output. Answers: "How far apart are the two values per row, and who sits where?"

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Dumbbell Range to your project and fits it to your theme.

Code

How Dumbbell Range is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { DumbbellRange } from '@/components/ui/dumbbell-range'

export default function DumbbellRangeDemo() {
  return (
    <div className="mx-auto w-full max-w-[560px]">
      <p className="mb-4 text-[13px] font-semibold text-[var(--vz-ink,#111)]">
        API pricing · input / output, Jun 2026
      </p>
      <DumbbellRange
        loLabel="input"
        hiLabel="output"
        caption="$ per 1M tokens"
        rows={[
          { label: 'Atlas 4', lo: 15, hi: 75, highlight: true },
          { label: 'Nova Max', lo: 10, hi: 40 },
          { label: 'Orion Pro', lo: 5, hi: 25 },
          { label: 'Vega 2', lo: 2.5, hi: 10 },
          { label: 'Lumen', lo: 0.5, hi: 4 },
        ]}
      />
    </div>
  )
}