Volume Control

Component

About

A compound volume slider with a mute toggle and a perceptual loudness curve, for audio and video players.

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

Code

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

Usage.tsx

"use client";

import * as React from "react";

import { VolumeControl } from "@/components/ui/volume-control";

export default function VolumeControlDemo() {
  const [volume, setVolume] = React.useState(0.6);
  const [muted, setMuted] = React.useState(false);

  return (
    <div className="flex h-full w-full items-center justify-center bg-background p-8 text-foreground">
      <VolumeControl
        className="w-64"
        value={volume}
        onValueChange={setVolume}
        muted={muted}
        onMutedChange={setMuted}
      />
    </div>
  );
}