Javascript - negative decimal input range with non-linear scale

Question

I have an input range slider that ranges from -1000 to 1000.

<input type="range" min="-1000" max="1000" value="0" /> 

I want the steps to be non-linear (either log or exp) with more precision in the lower range.

So for e.g.

-1000

-999.5

-998

-996

...

0

100

300

600

1000

Doesn't exactly need to be as shown above, but I just want the steps to be closer together in the lower range and further apart in the higher range. Looking for some jQuery/JS code to help me accomplish this.

Thanks!

Answer 1

You can start with above method:

html part:

<input id='digits' type="range" min="-1000" max="1000" value="0" step="100" /> 

js part:

$("#digits").on("input change", function() {
       var is_negative = this.step < 0;
       this.step = (is_negative)? (Math.abs(this.step) / 1.025).toFixed(0) : Math.pow(Math.abs(this.step), 1.025).toFixed(0);
   });

This is not the ONE right decision, it is just the Right Direction for your case