Bot Volume Slider

The BotVolumeSlider component is an inline volume slider for the bot's audio output. It is the same slider that lives inside BotAudioControl's popover, extracted so you can embed it standalone — for example in a settings panel, a sidebar, or a custom toolbar.

import { BotVolumeSlider } from "@pipecat-ai/voice-ui-kit";

<div style={{ width: 280 }}>
  <BotVolumeSlider />
</div>

BotVolumeSliderComponent

The BotVolumeSliderComponent is the headless variant. It accepts volume and onVolumeChange directly, so you can drive it from any state source.

import { BotVolumeSliderComponent } from "@pipecat-ai/voice-ui-kit";

function Demo() {
  const [volume, setVolume] = React.useState(0.8);
  return (
    <div style={{ width: 280 }}>
      <BotVolumeSliderComponent
        volume={volume}
        onVolumeChange={setVolume}
      />
    </div>
  );
}

render(<Demo />);

Integration

The connected BotVolumeSlider reads and writes volume through the useBotAudioOutput hook. It does not require PipecatClientProvider to render, but needs BotAudioOutput to be mounted somewhere in the tree for the volume to have any audible effect — handled by PipecatAppBase unless you pass noAudioOutput.

See Also

• BotAudioControl — a button + popover that wraps this slider.
• useBotAudioOutput — the underlying hook.