vime-volume-control

A control for adjusting the volume of the player and toggling the muted state.

Visual

Usage

HTML

<vime-player>

<!-- ... -->

<vime-ui>

<!-- ... -->

<vime-controls>

<!-- ... -->

<vime-volume-control></vime-volume-control>

</vime-controls>

</vime-ui>

</vime-player>

React

import React from 'react';

import {

VimePlayer,

VimeUi,

VimeControls,

VimeVolumeControl,

} from '@vime/react';

function Example() {

return (

<VimePlayer>

{/* ... */}

<VimeUi>

{/* ... */}

<VimeControls>

<VimeVolumeControl />

</VimeControls>

</VimeUi>

</VimePlayer>

);

}

Vue

example.vue

<template>

<VimePlayer>

<!-- ... -->

<VimeUi>

<!-- ... -->

<VimeControls>

<VimeVolumeControl />

</VimeControls>

</VimeUi>

</VimePlayer>

</template>

<script>

import {

VimePlayer,

VimeUi,

VimeControls,

VimeVolumeControl,

} from '@vime/vue';

export default {

components: {

VimePlayer,

VimeUi,

VimeControls,

VimeVolumeControl,

},

};

</script>

Svelte

example.svelte

<VimePlayer>

<!-- ... -->

<VimeUi>

<!-- ... -->

<VimeControls>

<VimeVolumeControl />

</VimeControls>

</VimeUi>

</VimePlayer>

<script lang="ts">

import {

VimePlayer,

VimeUi,

VimeControls,

VimeVolumeControl,

} from '@vime/svelte';

</script>

Stencil

class Example {

render() {

return (

<vime-player>

{/* ... */}

<vime-ui>

{/* ... */}

<vime-controls>

<vime-volume-control />

</vime-controls>

</vime-ui>

</vime-player>

);

}

}

Angular

example.html

<vime-player>

<!-- ... -->

<vime-ui>

<!-- ... -->

<vime-controls>

<!-- ... -->

<vime-volume-control></vime-volume-control>

</vime-controls>

</vime-ui>

</vime-player>

Properties

Property	Attribute	Description	Type	Default
hideTooltip	hide-tooltip	Whether the tooltip should be hidden.	boolean	false
highVolumeIcon	high-volume-icon	The URL to an SVG element or fragment.	string	'#vime-volume-high'
lowVolumeIcon	low-volume-icon	The URL to an SVG element or fragment.	string	'#vime-volume-low'
muteKeys	mute-keys	A pipe (/) separated string of JS keyboard keys, that when caught in a keydown event, will toggle the muted state of the player.	string ∣ undefined	'm'
mutedIcon	muted-icon	The URL to an SVG element or fragment.	string	'#vime-volume-mute'
noKeyboard	no-keyboard	Prevents the volume being changed using the Up/Down arrow keys.	boolean	false
tooltipDirection	tooltip-direction	The direction in which the tooltip should grow.	"left" ∣ "right" ∣ undefined	undefined
tooltipPosition	tooltip-position	Whether the tooltip is positioned above/below the control.	"bottom" ∣ "top"	'top'

Dependencies

Used by

• vime-default-controls

Depends on

• vime-mute-control
• vime-slider

Graph

graph TD;

vime-volume-control --> vime-mute-control

vime-volume-control --> vime-slider

vime-mute-control --> vime-control

vime-mute-control --> vime-icon

vime-mute-control --> vime-tooltip

vime-default-controls --> vime-volume-control

style vime-volume-control fill:#f9f,stroke:#333,stroke-width:4px

---

Built with StencilJS