title: Draggable progressbar
body: <p>I'm trying to create a draggable bar much like a progress bar. On page load the bar will be at a percentage predetermined, say 42%, is there a way to make that bar draggable as well? Here is the html:</p>
  
  <pre><code> &lt;div class="reviewAttn_bar"&gt;&lt;span id="resizable" style="width:42%"&gt;&lt;/span&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The jquery I'm using is:</p>
  
  <pre><code>$(function() {
    $( "#resizable" ).resizable({ handles: 'e' });
  });
  </code></pre>
  
  <p>Nothing is happening though. The CSS handles the sizing of the span. I'm thinking about creating an arrow graphic up top that the user can use to drag the bar to a different percentage but I can't get this part to work. Any suggestions?</p>
  
  <p>Here is the css I'm using:</p>
  
  <pre><code>.reviewAttn_bar {
  background-color: #1a1a1a;
  -webkit-background-size: 100px 100px;
  -moz-background-size: 100px 100px;
  background-size: 100px 100px;         
  background-image: -webkit-gradient(linear, left top, right bottom,
                      color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
                      color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
                      color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
                      to(transparent));
  background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                      transparent 75%, transparent);
  background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                      transparent 75%, transparent);
  background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                      transparent 75%, transparent);
  background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                      transparent 75%, transparent);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                      transparent 75%, transparent);            
  height: 65px;
  width: 280px;
  margin: 50px 0 50px -55px;         
  -moz-border-radius: 0 5px 5px 0;
  -webkit-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  -moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
  -webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
  box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;           
  </code></pre>
  
  <p>}</p>
  
  <pre><code>.reviewAttn_bar span {
  background-color: #ccc;
  -webkit-background-size: 100px 100px;
  -moz-background-size: 100px 100px;
  background-size: 100px 100px;         
  background-image: -webkit-gradient(linear, left top, right bottom,
                      color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
                      color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
                      color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
                      to(transparent));
  background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                      transparent 75%, transparent);
  background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                      transparent 75%, transparent);
  background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                      transparent 75%, transparent);
  background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                      transparent 75%, transparent);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                      transparent 75%, transparent);
  height: 71%;   
  -moz-border-radius: 0 3px 3px 0;
  -webkit-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; 
  </code></pre>
  
  <p>}</p>
  
  <pre><code>#resizable {
  display:block;
  </code></pre>
  
  <p>}</p>