Jquery UI slider variable scale

Question

I was wondering if anyone could explain how to print out the value of slider with maths added for discounting variable items.

http://jsfiddle.net/spadez/w7A4k/6/

For example if I wanted to do that:

(40 * NUMBER) - (NUMBER * 0.1)

This will basically apply a 10% discount to every additional number shown, rather than it being a 1:1 scale.

If the slider value equals 1 then the cost is $40
If the slider equals 2 then the value is $76

The best I could do as a starting point is this to get the total without the discount:

$("#amount")ui.value * 40);

Could someone please explain how I would do this?

CodeViking · Accepted Answer · 2014-02-07 19:20:33Z

1

It is not very clear what you are trying to do with a discount.

If we follow your formula

(40 * NUMBER) - (NUMBER * 0.1)

it doesn't match example:

If the slider value equals 1 then the cost is $40 If the slider equals 2 then the value is $76

Since,

Number = 1 -> (40 * 1) - (1 * 0.1) = 39.90
Number = 2 -> (40 * 2) - (2 * 0.1) = 79.80

I think you really meant something like this...

(40 * NUMBER) - 0.1 * (NUMBER - 1) * 40

This will be

Number = 1 -> (40 * 1) - 0.1 * (1 - 1) * 40 = 40
Number = 2 -> (40 * 2) - 0.1 * (2 - 1) * 40 = 76

Is that the case?

UPDATE:

http://jsfiddle.net/kLKxX/

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Slider - Snap to increments</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#slider" ).slider({
      value:1,
      min: 1,
      max: 100,
      step: 1,
      slide: function( event, ui ) {

        $( "#amount" ).val( "items: " + ui.value );
        $("#discounted").val("$" + calculateDiscount(ui.value, 40));
      }
    });
    $( "#amount" ).val( "items: " + $( "#slider" ).slider( "value" ) );
  });

      function calculateDiscount(value,base){
      var discounted = (base * value) - 0.1 * (value - 1) * base;
      return discounted;
      }
  </script>
</head>
<body>

<p>
  <label for="amount">Donation amount ($50 increments):</label>
  <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
      <input type="text" id="discounted" style="border:0; color:#FF0000; font-weight:bold;">
</p>

<div id="slider"></div>


</body>
</html>

edited Feb 7, 2014 at 19:20

answered Feb 7, 2014 at 17:52

CodeViking

2061 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jimmy Over a year ago

Yes, sorry about my maths. What you propose is correct.

CodeViking Over a year ago

Here you go then, I changed your code up a bit, but I think you'll get the idea, updating original answer too. jsfiddle.net/kLKxX

Collectives™ on Stack Overflow

Jquery UI slider variable scale

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related