Matte Balance Slider

A dark stereo-balance (left/right pan) slider that shows "Center" or a percentage toward L/R as a bipolar range input, originally a vanilla-JS/HTML widget ported to React.

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

import BalanceSlider from "@/components/ui/matte-balance-slider";

export default function BalanceSliderDemo() {
  return (
    <div className="w-full min-h-screen flex items-center justify-center bg-[#f5f4f2] p-10">
      <BalanceSlider />
    </div>
  );
}