How to lower a computer's volume with a slider

How could you lower or higher the computer’s volume with a slider?

Changing the Volume of a user’s device directly isn’t possible like I know. Instead I would use Jovanny’s Sound API to manage the Volume of every Sound directly when it’s played.
You would need a slider which needs to have a value from 0 (muted) to 1 (max volume) and saves it to a global variable like window.VOL. This global variable you can now use to set the Volume of every sound with Jovanny’s Sound API.

Hope I could help!

1 Like

I agree with Towim, Jovanny’s Sound API is great for working with sounds!

And although there isn’t a way to change the volume of the computer that I know of, there is an easy way to change the volume of all sounds in a wick project to a specific value

This might help with your project

1 Like

How could you use this piece of code with a slider, is there a way?

1 Like

Try it… just make your own slider…

[1]. Make a slider clip and call it sliderClip. Like a vertical rectangle so the user can drag it.
[2]. Then inside of sliderClip, place the left corner of the rectangle to zero in x coordinate.
[3] Limit the user to move the slider from zero to a max number in x coordinate. (example from 0 to 200px)

Then on your Howler:

let userVolume = sliderClip.x / 200;

That will set userVolume from 0 to 1, which are the min and max inputs for Howler vollumes.


I’d like to add that there’s also a built-in “slider” asset with the built-in assets in the editor.
It uses a similar method to the one Jovanny mentioned.

(I’d recommend trying to go through Jovanny’s steps for making a slider first for extra coding practice)

I was able to make a quick simple example with it:
My Project5-15-2022_15-39-17.wick (123.1 KB)


Thank you both for your help! :)

@Hamzah_Al_Ani sorry to bother but I’m having problems with the slider, if the slider is inside many clips it won’t move either work. Do you know how to fix this?

This is probably because the slider uses mouseX in order to determine where to slide to.

Try this slider instead:
slider.wick (123.1 KB)
It uses “mouseMoveX” instead of “mouseX” to move the slider.
Let me know if it works

1 Like

Thank you again for your help. It worked out well!

1 Like

@Hamzah_Al_Ani I have another question about the volume with the slider, how could I be able to change a clip’s frame according to the volume levels? here is a wick file with a template, if you could please solve this it would be amazing.

I see no wick file, but from how you described it, I’m guessing that you have a clip with different frames that you want to change based on the volume.

So like if the volume was 100%, you’d want it to go to the last frame, versus if the volume was 50, you’d want it to go to the middle frame ?

If so, here’s how I would do it:

// "value" is equal to the volume out of 100
// "framesCount" is equal to the total number of frames in the clip
// "Clip" is the clip that you want to have its frame changing based upon the value of the volume

var framesCount = 5; // Change 5 with the number of frames in Clip

Let me know if I’m wrong

oops sorry here is the wick file I thought I uploaded it Test File6-13-2022_15-56-07.wick (10.6 KB)

so if the volume is from 60 to 100 the clip will show a full volume icon but if it’s from 26 to 59 it’s a mid volume icon and if it’s from 1 to 25 it will be a low volume icon. Oh and if it is 0 it will be a volume icon with no bars

I added a check in the sliders update script which changes the volume icon after your whishes.

Here’s the file: Test File6-15-2022_13-58-55.wick (10.7 KB)

let volumeValue = Math.round(this.value*100);


if (volumeValue > 59) {
} else if (volumeValue > 25) {
} else if (volumeValue > 0) {
} else {


Thanks! It worked out pretty well.