A slider is required that can grow exponentially (without using a range)

Question

I am currently using the jQuery UI slider so that people can choose the amount to donate. The problem is that the slider is small and it needs to compensate for a minimum of $ 1 and a maximum of $ 10,000. The proposed solution is to use a small increment, possibly $ 1 or $ 2, for values ​​from $ 1 to $ 1000, and then from there, increasing the increment exponentially up to $ 10,000, but I can not find a plugin capable of this.

So, now I have an increment of $ 1, and, as you probably guessed, it is almost possible to choose a specific amount of money.

Any help would be great!

Answer 1

The slider is unlikely to hit me as the right tool for this job.

But if you insist, you can increase the step size of the slider (say, 10 possible positions) and at each step find the amount corresponding to it.

Example:

• 1 → 1 $
• 2 → 2 $
• 3 → 5 $
• 4 → 10 $
• 5 → 50 $
• 6 → 200 $
• 7 → 1k $
• 8 → 5k $
• 9 → 10k $
• 10 → 20k $

Answer 2

To add an answer to @brunodecarvalho , do it JSliderwith labels, but without labels, connect it with JLabelor JTextFieldso that when the value of the slider changes, the corresponding value is displayed in JLabelor JTextField.

JTextField, JTextField ( , ), JTextField.

Answer 3

As already mentioned, you will have to compare the position of the slider with the amount of money. Here is a nice, almost logarithmic mapping that has the nice property of giving rounded values:

var slider_values = [];
var mantissas = [1, 1.2, 1.4, 1.6, 1.8, 2, 2.5, 3, 3.5, 4, 4.5, 5, 6, 7, 8, 9];
for (var base = 1; base < 10000; base *= 10) {
    for (var i = 0; i < mantissas.length; i++)
        slider_values.push(mantissas[i] * base);
}
slider_values.push(10000);

This maps the integer range [0..64] to the range 1 - 10000.