Coding a volume bar

Question

I'm trying to code a progress bar in JS.

I have the bar coded but have problems with the math to get it to work correctly. When a user clicks on the bar I'm grabbing the pixel position they click on...this is working correctly. So my bar is 80px wide and if i click in the middle the clicked value returns at about 40...if i click right at the end of the bar i get back 80.

So I thought I needed to divide the click position by the total width of the bar and then times this by the total volume...which is 100...

so clicking in the middle of the bar : 40 / 80 = 0.5. This is correct...the user has clicked halfway so 0.5 makes sense....but then if I times this by 100 it gives me 50 obviously...which isn't right...if i do the scenario where a user has clicked for full volume i get 80 / 80 = 1 * 100 = 100

What calculation do i need to make to get this working?

Answer 1

Why isn't 50 correct? You said your volume is out of 100. 50 is 50% of 100, which is 50% of the progress bar, which is halfway. Makes perfect sense to me.

Answer 2

save yourself a lot of headache and implement jQuery's slider.

http://docs.jquery.com/UI/Slider