This component is used to create a range input for controlling the volume of media.
<script type="module" src="https://cdn.jsdelivr.net/npm/@vidstack/player@next/cdn/define/vds-volume-slider.js" ></script>
<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
100. The conversion is automatically handled by this component.
In the following example, we add a mute button and conventional volume slider inside some media: