1. UI
  2. Volume Slider

UI

Volume Slider

This component is used to create a range input for controlling the volume of media.

Import

tsx
        import { VolumeSlider } from '@vidstack/player-react';

      

Usage

The <VolumeSlider> component extends <Slider>, and two-way binds the slider's value with the provider's volume level.

The slider receives volume updates from the provider through the media store, and dispatches a vds-volume-change-request event to request updating the current volume level on the provider as the slider value changes.

The media volume range is between 0 (min) and 1 (max), but on the slider it's between 0 and 100. The conversion is automatically handled by this component.

          
        

Styling

In the following example, we add a mute button and conventional volume slider inside some media: