<p>I need to create a 'slider' for a client's site. The slider should allow people to select how many items they want of x item, and show what the price will be based on that. The weird(ish) part is that the ratio of the price increase will go down as the amount of items goes up:</p>

<ul>
<li>1 item: $100</li>
<li>2 items: +90 = $190</li>
<li>3 items: + 80 = $270</li>
<li>4 items: + 70 = $340</li>
<li>5 items: + 60 = $400</li>
<li>6 items: + 50 = $450</li>
<li>7 items: + 50 = $500</li>
</ul>

<p>And all increases from then on are +50. This probably seems like an overly simplistic question, but does anyone know how I could go about doing this? I have almost no experience with JavaScript :( </p>

Check out Yahoo! UI. they have a slider widget:
http://developer.yahoo.com/yui/slider/
The following example should get you started:
http://developer.yahoo.com/yui/examples/slider/slider-ticks.html
.
All JavaScript frameworks (
jQuery
,
MooTools
) seem to offer a slider. The YUI will give you a lot of control and a loader so you don't have to host the script on your server. Beware that YUI does not make implementation as painless as with the two other i mentioned.
Here is a MooTools example:
```
```
// First example of http://demos.mootools.net/Slider

<div class="slider" id="myslider">
      <div class="knob" style="position: relative;"/>
    </div>
```
```
And the JavaScript:
```
```
var el = $('myslider'); // The slider graphic
new Slider(el, el.getElement('.knob'), {
    steps: 7,   // There are 7 choices
    range: [1, 7],  // Minimum value is 1, maximum is 7
    onChange: function(value){
        // Calculation of the value goes here
    }
});
```
```