Jquery Stat Bar Help

[k1ngscorp1o]

Im trying to code a system where there is a minus button a bar showing how full your stat is and then a plus button, on minus the bar goes down and on plus it goes up. I've been looking for different ways to do this all day and the closest I've found is this:

HTML:

<div style="background-color:white; width:10%; height:100%;"></div>

 

I need to access that 10 right before the percent sign and manipulate that number but Im unsure how with any method.

JS:

 

$(function(){

       var valueElement = $('#test');
       function incrementValue(e){
           valueElement.text(Math.max(parseInt(valueElement.text()) + e.data.increment, 0));
           return false;
       }

       $('#stat1_plus').bind('click', {increment: 1}, incrementValue);

       $('#stat1_minus').bind('click', {increment: -1}, incrementValue);

   });

 

I think this would be the functionality im looking for but combining this with a bar Im not sure how to go about doing it. Has anyone done something similar or know an alternative?

[sniko]

I'm unsure if this is what you wanted, but it's what I concluded from your post.

JsFiddle

[HauntedDawg]

jsFiddle jquery stat bar, with mousedown action, so you dont have to click hundred times :D

[k1ngscorp1o]

Thanks you 2 were very helpful!