Duration pickerPro

5 s, 10 s or a custom length, each with its credit cost. Lengths the model cannot render are off with the model's range in words, and the custom slider stays inside it.

Markdown

On this page

Pro5 s, 10 s or a custom length, each with its cost, and the balance after.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/duration-picker

Usage

tsx

import { DurationPicker } from "@/components/ui/chatcn/pro/duration-picker"

<DurationPicker
  value={seconds}
  onValueChange={setSeconds}
  limits={{ minSeconds: 2, maxSeconds: 8, creditsPerSecond: 4 }}
  balance={credits}
/>

Under the options, the price of the current choice and the balance after, or how many credits are missing. Custom lengths snap to limits.step. The file also exports VideoRange, the native range input over a drawn track the video controls share.

Examples

States

A model capped at 8 s, a custom length, a short balance, three presets without custom, disabled and right to left.

ProA model capped at 8 s, a custom length, a short balance, three presets without custom and disabled.

Props

Prop	Type	Notes
`value`, `defaultValue`, `onValueChange`	`number`	Seconds
`presets`	`number[]`	Default 5 and 10
`allowCustom`	`boolean`	Default true
`limits`	`VideoModelLimits`	Min, max, step, credits per second, base credits
`getCost`	`(seconds) => number`	Default from `limits`
`balance`	`number`	Shows the balance after, or what is missing
`modelName`	`string`	Named in the limit line
`label`, `customLabel`	`string`	Default Clip length, Custom
`disabled`, `locale`

Keyboard

Key	Action
`←` `→`	Move between options
`Space` or `Enter`	Pick the focused option
`←` `→` on the custom slider	Change the length by one step

Accessibility

Options are named with their length and cost in words: "10 seconds, 40 credits". An option past the limit says why it is off.
The custom slider is a native range input that speaks "7 seconds".
A short balance is said in text, not only shown in amber.

Motion

Nothing moves on its own. Options press to 0.97 and the slider thumb grows slightly while held.
The cost rolls its digits when the length changes. Reduced motion keeps the digits still.