Using jQuery to vary a price dependant on the number set by a range slider

Question

my first post so please be gentle. I have a range slider with min and max from 1-100. My price structure ranges from £1.99 to say £1.19 dependant on how many the user selects on the range slider. I'd like to know the best way to achieve this, either by a switch statement, or using if else statements. The value chosen will be validated on the post back via php so I'm not concerned about security in this question. Apologies if I've missed something, look forward to the help.

$(document).ready(function() {
 $("#slider").slider({
  range: "min",
  animate: "slow",
  value:1,
  min: 1,
  max: 100,
  step: 1,
  slide: function(event, ui) {
   update(1,ui.value); //changed
  }
 });
 //Inital values when page loads, amount is set to 1 as this is the minimum a user can buy.
 $("#amount").val(1);
 $("#price").val(1.99);
 $("#amount-label").text(0);
 $("#price-label").text(0);
 update();
});



//changed. now with parameter
function update(slider,val) {
 //changed. Now, directly take value from ui.value. if not set (initial, will use current value.)
 var $amount = slider == 1?val:$("#amount").val();
 var $price = $("#price").val(); 
 
 
 $total = "£" + ($amount * $price).toFixed(2);
 $( "#amount" ).val($amount);
 $( "#amount-label" ).text($amount);
 $( "#price" ).val($price);
 $( "#price-label" ).text($price);
 $( "#total" ).val($total);
 $( "#total-label" ).text($total);
 
 $('#slider a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+$amount+' <span class="glyphicon glyphicon-chevron-right"></span></label>');
}

Hi. Top tip - when doing comparisons in javascript use === instead of ==. This is because the 3 = version includes type comparison which is what you usually want. Google it - there are plenty of good explanations out there. And I expect some js expert will be along in a minute with a spiffy array translation in answer to your question shortly. — Vanquished Wombat, Nov 29 '16 at 20:35
When you say there is a relationship between qty and price, can we assume this is a commercial rather than mathematical progression, so maybe 1 = 1.99 each, 2 = 1.90 each, 3 = 1.80 each, 5 = 1.50 each and 10 = 1.00 each. I'm thinking if this is for an e-commerce site then to reflect the real world you would want this type of commercial randomness. Correct ? — Vanquished Wombat, Nov 29 '16 at 20:53
You might want to take a look at this as it looks like the same territory as your requirement. http://stackoverflow.com/questions/967372/jquery-slider-how-to-make-step-size-change — Vanquished Wombat, Nov 29 '16 at 20:58
Hi Vanquished Wombat, thanks for your replies. In answer to your 2nd reply, the range goes as follows if $amount.val is between 1 and 10 $price=1.99 else $amount.val is between 11 and 25 $price = 1.79 and so on. hope that helps you help me! — MaHatMaCoat, Nov 29 '16 at 21:21

score 0 · Answer 1 · answered Nov 29 '16 at 23:06

It seems that you can handle the UI side of things and your real query is about how to manage selection of the range from what will be a db-driven set of ranges.

Here is a possible solution (untested). The rangeFrom and rangeTo arrays hold the bounds of your array. The val array holds the matching values. You call the function passing in the quantity the user has selected, then we walk the array until we find a match and return the value. Or we return -1 if there is no match.

function getVal(qty) {

var rangeFrom = [1, 11, 26] // lower bound of ranges
var rangeTo = [10, 25, 50]  // upper bound of ranges
var val = [1.99, 1.79. 1.49] // values for ranges

var result = -1 // set to indicate fail
for (var i = 0; i < rangeFrom.length; i = i + 1) {

    if ( qty >= rangeFrom[i] && qty <= rangeTo[i] ) {
        result val[i]
        break;
    }

return result; // will be -1 if no match.
}

Based on the inference that you are working on a DB-driven system, this approach is better than case statements because it is inherently extendable - if you have more quantity bands then you just have more entries in the arrays. You could also deliver the arrays easily via ajax, etc.

Hi Vanquished Wombat, this looks something like what I have in mind so I'll piece it together and let you know if it does the job. Thanks — MaHatMaCoat, Nov 30 '16 at 13:33
ok - keen to hear. Don't forget to indicate that the answer was good by clicking the tick mark beside my answer please. Also let me know if the code has any issues and I will edit in the corrections. — Vanquished Wombat, Nov 30 '16 at 13:37

Using jQuery to vary a price dependant on the number set by a range slider

1 Answers1