How can I use the 'media-volume-range' in the external of 'media-controller'

[CreamR]

I'm trying to build a music-player using media-chrome which is a wonderful package and I expect that media-volume-range can be used outside of media-control-bar to control volume, like the following code, but it doesn't work, Is it need a attribute to connect the media-control-bar? thanks for the help🙏

<media-controller
			audio
			class="middle"
		>
			<audio
				slot="media"
			></audio>
			<media-control-bar class="media-player">
				<media-play-button class="selectAll"></media-play-button>
				<media-time-display
					show-duration
					class="selectAll"
				></media-time-display>
				<media-time-range class="selectAll"></media-time-range>
				<media-playback-rate-button class="selectAll"></media-playback-rate-button>
			</media-control-bar>
		</media-controller>
			<media-volume-range></media-volume-range>

[luwes]

Thanks!

yes, try with linking the media-controller id attribute with the media-volume-range mediacontroller attribute.
see here for an example https://www.media-chrome.org/docs/en/get-started#adding-controls

[CreamR]

thanks for your reply!
I has been solve it, and I observe that I can not use id attribute to connect with media-controller if the package version is below of 1.0.0, when i update the package in version 1.0.0 that problem solved

[dylanjha]

The attribute is now mediacontroller (one word, without the dash -)

<media-controller id="my-controller">
</media-controller>
<media-volume-range mediacontroller="my-controller"></media-volume-range>

@CreamR does that work for you?

[CreamR]

Thanks for the tips!
yes, it is still working, I code according to the document from the official website https://www.media-chrome.org