Coding a slider to update price per unit as quantity changes - slider

Question

http://jsfiddle.net/2e7gq/633/
I am trying to create a slider that will display 3 html input boxes.
Quantity
Price per unit
Total (quantity*price per unit)
the goal is to change var price per unit when the slider slides to increments of 50.
thanks!
I am new to programming here is my code:
`$(function() {
var inputValue = $(".mpd_value").val();
$( ".mpq_slider" ).slider({
min:50,
max:50000,
step:50,
value:50,
slide:function(event,ui){
$(".mpd_value").val(ui.value);
$(function(){
calculate();
});
}
});
$(".mpq_value").val($(".mpq_slider").slider("value"));
$(".mpq_value").change(function(event){
$(".mpq_slider").slider("option","value",inputValue);
})
function calculate(){
var quantity = $(".mpd_value").val();
var ppu = .84;
var total = quantity*ppu
$("#total").val(total);
$("#ppu").val(ppu);
};
});

Answer 1

It seems that you're missing a <div class="mpq_slider"></div>. Put it as the first line in the HTML spot. This is the part that makes room for the actual slider. Also, if I understand what you are trying to do correctly, you want the Quantity to increase with the slider and the ppu to change also (like things gets cheaper the more you buy)? If so, you are using the switch statement incorrectly. You could, instead do something with ifs and else ifs:
var ppu = defaultValue;
if (quantity <= 50) {
ppu = 1.117;
}
else if (quantity <= 75) {
ppu = .941;
}
...
Also note how I changed the >= into <=, since that'll make the program check in the right order. Here's what I changed to your code http://jsfiddle.net/2e7gq/637/ .
Now that I think about it, there's another way too. Y&ou can keep the switch if it says switch(true){ and then change all the >=s into <=s.
Glad to hear you're learning Javascript!