jQuery graded progress bar
<p>I’ve been Googling for about an hour or so trying to find a jquery control that would come close to what I’m trying to do (or a control that I could tweak), but couldn’t find any.</p>

<p>Perhaps anyone could share a link or might propose a different approach.
I’m trying to achieve the following:</p>

<p>I have a web site that targets dealers (not the general public). Each dealer has a predefined money target. For example, dealer A has a 59K target. Dealer B has a 21K target.
In addition, we currently have 3 rules.</p>

<ul>
<li>If 2% of the customer’s target has been reached, we offer 20%
discount. </li>
<li>If 4% of the customer’s target has been reached, we offer 40%
discount.</li>
<li>If 6% of the customer’s target has been reached, we offer 60%
discount.</li>
</ul>

<p>I’m trying to find some sort of progress bar that would show the 3 rules in addition to the current amount the user is at. Example:</p>

<blockquote>
  <p>------8K----------------|------------------|------------------------|</p>

<pre><code>              20%         40%            60%
</code></pre>
</blockquote>

<p>The 8K represents the current amount the current logged in dealer has.
Another example (for a different logged in dealer) might be:</p>

<blockquote>
  <p>---------------------|-------27K-----------|------------------------|</p>

<pre><code>            20%           40%             60%
</code></pre>
</blockquote>

<p>How would one create (or tweak) such a control?
Thanks</p>
