Cocos Creator 3.0 preview | Slider + Audio volume controller

can we control music volume using a slider?
I am playing a music background using a script, all is working fine,

while training on cocos creator I got this idea to control volume using Slider UI.
Can anyone help me in scripting it?

slider component can register the slider changed event, try setting the audioSource.volume in the callback of ‘slide’ event

    onLoad: function () {
       this.slider.node.on('slide', this.callback, this);

    callback: function (Slider) {
       // set audioSource volume

I saw that in the documentation, but I couldn’t guess how to access the component
example :

According to the image i sent audio is working properly by clicking on a button I can pause and play,
According to the script you sent what would the script in the
callback: function (Slider){ }

to control Audio volume?

Please if you can send me a full script example you will make it easy to me, i am new to Cocos Creator and TypeScript, Still Training and getting ready for the original cocos creator 3

as the callback return a slider component, you can set audio volume with progress property in slider, like

    onLoad: function () {
       this.controllingVolume.node.on('slide', this.callback, this);

    callback: function (controllingVolume) {
          audioSource.volume = controllingVolume.progress;

I tried that before it did not work, I have no idea if am missing something.
it have been a while trying to solve it

There is something is missing, but i can’t figure it,
here is the thing

ControllingVolume , is the slider component
Screenshot 2021-01-07 214618

.progress , is a method exists in the ControllingVolume Because it is a slider component.

why in the first photo not accepting to give the .progress = 0.1

progress is a value as far as it seems in the API of cocos creator 3.0

if I access the progress of the component Controlling Volume {Slider Compnent}

then I can say this.volume = this.ContorllingVolume.Progress

But it is not working


if (this.controllingVolume) {
    this.controllingVolume.progress =  0.1;


this.controllingVolume!.progress = 0.1

ensure that this points to an audioSource object, I think maybe it shoud be this.audioSource.volume = this.ContorllingVolume.progress

Hoorrayyy ,
You gave me the key for the solution. I was missing ( ! ) in [ this.controllingVolume!.progress = 0.1 ]
explanation mark, though i was shocked missing only explanation mark !
however i have no idea what does it do in typescript.

here i ended the script of audio volume