JavaScript slider

Question

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:

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

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 :(

Answer 1

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
 }
});

Answer 2

While there are presumably endless ways of getting a slider done with JS, I think the easiest way to calculate the prices are just hard-coding (or listing) them somewhere, and just else-if:ing through them.

You could do an algorithm that counts 100-(i*10) for the five first items, 50 for the rest, but that's probably harder to change in the future than the hard-listed way.