Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Media

Playback Speed Button Group for React

A playback speed picker with rates from 0.5x to 2x, and Slow, Normal, Fast and Faster presets that share one selection.

Framework
UI library

Speed control for a video or podcast player. The first row lists six rates; the second names four of them. Both write one number that starts at 1, so choosing Fast also fills 1.5x.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is the speed stored?

As a number, starting at 1. Each button carries its rate as its value, and pressing it stores that rate as a number.

Why does Fast light up 1.5x too?

The presets map to rates: Slow is 0.5, Normal 1, Fast 1.5 and Faster 2. Both rows compare against the same number, so the matching buttons fill together. 0.75x and 1.25x have no preset.

How is the selected rate shown?

Its button uses variant="default" and sets aria-pressed. The others use outline.

How do I apply the speed to a player?

Set the media element's playbackRate to the stored number when it changes. The demo has no player.

How is 1.25x written?

The label is the number followed by x. Format it yourself if you want a different style, such as 1.25×.

What if six buttons don't fit?

Keep the preset row, or move the rates into a Select or a menu.

All 39 button group examples