CODEWITHSUNDEEP
javascriptjqueryslideruisliderjquery-ui-slider
Katie Reed
Katie Reed

Reputation: 107

jQuery Slider Bar -- trying to setup range and intervals based on user input

The idea is that someone would input their medical bill amount, and after a discount is taken off, the user now has a new amount to be paid. The user then will have the option to choose how much they would like to pay a month until the amount is fully paid.

I would like to create a jQuery slider with selectable ticks breaking down the choice for a monthly payment. For example, if someone inputs their medical bill to be $1000, after a 20% discount it would become $800, and then I want 800 to be divided into 12 ticks on a slider with each value divided by the number of months. The first tick would be $800 for one month, while the last tick would be approx. $66 for twelve months.

I tried looking at the jQuery slider documentation but I wasn't sure how to aggregate range values based upon user input. I have my javascript code so far for the user input, but I am unsure on how to merge it with a slider.

Any help in the right direction would be greatly appreciated. Thank you!

// Have the user input their medical bill amount
var originalAmount = prompt('What is the amount of your medical bill?');
console.log(originalAmount);

// Take off 20% of the medical bill for a discount
var discountAmount = originalAmount * .20;
console.log('Your discount is 20%, which is ' + discountAmount + ' in savings.');

// Declare what the new amount owed is after taking the discount off
var newAmount = originalAmount - discountAmount;
console.log('Your new amount owed for your bill is ' + newAmount + ' .');

Upvotes: 2

Views: 217

Answers (1)

Juergen
Juergen

Reputation: 12728

Your problem will not be easy to implement that way, you described, since jQueryUI Slider does only provide "fixed ticks" by default, as much I remember.

Thus I would recommend a different direction:

  • First of all, forget about the discount for the slider. The Slider should only provide support for the real amount that must be paid. The discount just makes things more complicate without benefit. Subtract the discount in a first step and after that comes the slider.
  • How about this: Don't provide a slider for the amount, but for the number of payments that the customer wants to do: One payment, two payments ..., twelve payments.

So you have a simple slider with increments of one.

For customer convenience you can provide a read-only field where the single payment is printed, when the slider is moved (eg. $66 for the twelve months payment).

When you really have to have a "payment-slider":

There is of course the possibility to program the "ticks" or "steps" (how it is called in the jQuery documentation) by yourself. You can of course set the a range of payments to 800 and the step to 1. But then you have to implement the ticks yourself.

How do you do that:

There is a "change" event. You can register a function for that event. Every time the event fires, you have to check the current value of the slider -- and what you do is check the current position of the slider. And when the slider is not on one of the desired positions, find the nearest one and correct the slider!

You of course must be very carefully doing that, since events can be tricky. One problem you could run into is, that you get an event, correct the slider and since the correction itself is a change you get a further event .... and you run in an endless recursion of events, blocking the browser of the user. You should of course avoid that!

The effects you get, might be more or less desirable. It might also feel "clumsy" for the user, since the steps have different sizes. You must try, if the behavior you finally get will be good enough for your customers.

Upvotes: 2

Related Questions