1. UI
  2. Volume Slider

UI

Volume Slider

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

Import

js
        import '@vidstack/player/define/vds-volume-slider.js';

      
cdn
        <script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@vidstack/player@next/cdn/define/vds-volume-slider.js"
></script>

      

Usage

The <vds-volume-slider> component extends <vds-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: