Logarithmic Range Input Slider - Increasing Steps in Thresholds

Question

Summary
I need a range input with numbers from 1,000 to 10,000,000. Due to the large range it can't be linear. So each time the decimal length increases (e.g. from 1000 to 10000) the steps should also increase.

#--------------------#--------------------#--------------------#--------------------#
0  1000   5000  9000 10,000    56,498  100,000    500,000   1,000,000          10,000,000

Failed attempts
I already tried to create a slider range from 1 to 5 (to have 4 steps) and interpolate the values but I couldn't get it to work so the steps increased at the same time when the decimal increased.

Also I tried this solution: Logarithmic slider It's better than a linear behavior but still the steps in the beginning (left) are too small and too large in the end (right end of range slider).

Additional requirement
This range slider also has to be connected to an input field. So the input value also has to be written back to the slider (so some kind of inverse calculation input <-> range slider).

Adjusted version of the Logarithmic Slider solution linked above:

function LogSlider(options) {
   options = options || {};
   this.minpos = options.minpos || 0;
   this.maxpos = options.maxpos || 100;
   this.minlval = Math.log(options.minval || 1);
   this.maxlval = Math.log(options.maxval || 100000);

   this.scale = (this.maxlval - this.minlval) / (this.maxpos - this.minpos);
}

LogSlider.prototype = {
   // Calculate value from a slider position
   value: function(position) {
      return Math.exp((position - this.minpos) * this.scale + this.minlval);
   },
   // Calculate slider position from a value
   position: function(value) {
      return this.minpos + (Math.log(value) - this.minlval) / this.scale;
   }
};


// Usage:

var logsl = new LogSlider({maxpos: 300, minval: 1000, maxval: 10000000});

$('#slider').on('change input', function() {
  var val = logsl.value(+$(this).val());
  // console.log(val);
  var rounded = Math.round(val / 1000) * 1000;
  var localized = rounded.toLocaleString('DE');
   $('#value').val(localized);
});

$('#value').on('keyup', function() {
  var val = +($(this).val().toString().replace(/[\D]/g,''));
  //console.log(this.value, val);
  var pos = logsl.position(val);
  //console.log(pos);
  $('#slider').val(pos);
});

$('#value').val("10000").trigger("keyup");

#slider {
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Input value or use slider:
<input id="value" />
<input id="slider" type="range" min="0" max="300" />

The smallest steps are 1,000. Here you can see, between 1,000 and 2,000 there are around 20 px space. But on very high numbers, the steps are up to over 300,000. So not the best user experience. You should at least be able to input in steps of 100,000 as illustrated above.

The logarithm (base 10) of your min and max values are equal to 3 and 7. I don't understand what you mean by "too small and too large". — Damien, Mar 17 '21 at 09:25
*too small*, *too large*, *4 steps* - I can't really imagine what you tried exactly. — tevemadar, Mar 17 '21 at 10:00
I updated the description and added the customized code snippet from the linked solution to better explain the issue. Hope it clarifies a few things! — Max, Mar 17 '21 at 15:20

Nina Scholz · Answer 1 · 2021-03-17T09:40:50.097

To get you started, you could get the right base for the slider.

function updateSlider() {
    let value = +document.getElementById('value').value,
        adjusted = Math.max(Math.min(value, max), min);

    document.getElementById('slider').value = Math.log(adjusted / min) / Math.log(base);
    updateValue();
}

function updateValue() {
    const value = document.getElementById('slider').value;
    document.getElementById('value').value = (min * base ** value).toFixed(0);
}

const
    min = 1_000,
    max = 10_000_000,
    steps = +document.getElementById('slider').max,
    base = Math.pow(max / min, 1 / steps);

document.getElementById('value').addEventListener('change', updateSlider);
document.getElementById('slider').addEventListener('click', updateValue);

<input id="value" />
<input id="slider" type="range" min="0" max="20" />

Spektre · Answer 2 · 2021-03-18T07:36:31.143

Not a Javascript coder so I will not touch any of the stuff however you can use linear slide and use conversion between linear and logarithmic scales:

// linear x to logarithmic xx
if (x>=xmin) xx=log(x/xmin)/log(xmax/xmin)
 else        xx=0.0;

// logarithmic xx to linear x
x=exp(xx*log(xmax/xmin))*xmin;

Where xmin,xmax is your range. Beware it can not include zero !!! so for example:

xmin=1.0;
xmax=10000000.0;

the xmin can be anything bigger than 0 for example 0.001 and xmax must be bigger than xmin usually xmin*pow(10,?)...

So x is the slider linear position from xmin to xmax and xx is logarithmic position in range <0.0,1.0>

So you just simply multiply the xx by your resolution in pixels of your view/slider what ever to get [pixels]...

I use conversions like this time to time here an example:

spectroscope

where xmin=100; xmax=22050; from my spectroscope app.

Here 3D interpolation between curves another example with C++ code

Logarithmic Range Input Slider - Increasing Steps in Thresholds

2 Answers2

Linked