Logarithmic increase of values

[scooterlord]

Hello again, I thought this deserved a seperate issue!

If there is a large range of numbers, for example 0.1-150.000, is is really difficult to select a range of 10s or 100s.

It would be great if the values increased logarithmically with small values for small numbers and values increasing as you go at the end of the range.

(ebay uses a similar technique for it's price range)

Thanks for your time! :)

[IonDen]

Hi again, in future i will try to implement this feature.

[IonDen]

Hi, it could be done now with prettify function.

[popovae]

Hello everyone!

@scooterlord Did you manage to get this work? @IonDen maybe you can give some example? I tried to make it work, but as far as I can understand Pretiffy functions have nothing to do with logarithmic value increase (steps)...?

[IonDen]

Hello, @popovae, your are looking for this: http://jsfiddle.net/IonDen/7dbowqfd/ ? At least this example could be a good starting point.

[popovae]

Hello, @IonDen No, I was looking for something like it was described in the original question:

If there is a large range of numbers, for example 0.1-150.000, is is really difficult to select a range of 10s or 100s. It would be great if the values increased logarithmically with small values for small numbers and values increasing as you go at the end of the range.

In other words - we have a range From 1 To 100 000, selecting 100 will be nearly impossible in current implemention of ION RangeSlider, it only works with the nearest values of max/min. In this case using logarithmically decreasing Steps it will be really easy to select any value in any range... Please have a look at the example here - http://stackoverflow.com/a/846249

[ilanfreoua]

UP ! we use ion.rangeSlider in our project and would love to have a logarithmic step grid instead of a linear grid (or the ability to manually set grid step)

[IonDen]

Hi, @ilanfreoua, check this demo: http://jsfiddle.net/IonDen/7dbowqfd/ This means, that you can do anything you want with numbers using build-in prettify function.

[ghost]

Hi there!

Logarithmic scaling: http://jsfiddle.net/7dbowqfd/5/

[smajl]

The problem I found with the approach posted by @nicktabolich is that it distributes logarithmic range in this form on X axis: 1111111111|222222222|33333333|4444444|55555|6666|777|88|9|1010101010|...

I assumed that I will always use logarithmic ranges starting from 0 and ending in some power of ten (10, 100, 1000, ...). Then I ended up with something like this:

    // assume this.max = 1000000
    _convertFromAxisToLinearLog(value: number): number {
        const logAxisPow = this._getIntegerDigitCount(this.max) - 1; // 1 000 000 -> 7-1 -> 6
        const logAxisLinearStep = this.max / (logAxisPow * 10);
        const stepsInValue = Math.round(value / logAxisLinearStep);
        const valuePow = Math.floor(stepsInValue / 10);
        const remainder = stepsInValue % 10;

        if (value === 0) {
            return 0;
        } else if (remainder) {
            return Math.pow(10, valuePow) * remainder;
        } else {
            return Math.pow(10, valuePow);
        }
    }

Which produces something much more usable for an user: 1111|2222|3333|4444|5555|6666|7777|8888|9999|1010|...

[Lajdak]

@nicktabolich There is problem :( Slider and his values seems be ok on look, but if you need work with selected value there are 'old' value (by linear). Range is 1-10000, there is 10 segments on your example and ending first segment is with value 2 but if you choose this value then real value is 1000 or if you pick second segment with 6 real value is 2000 and so on... Look for better understand http://jsfiddle.net/7dbowqfd/75/

[Lajdak]

Ok I got it just if i need right 'selected' value i will get it via this.prettify(data.from) not only data.from.

[haim3307]

thanks for the example, however i added two inputs to adjust the min and max value , but when i try to update the slider from the input value i don't know if to update the position using input value or try to reverse the prettify and how to do either.

[florent-dehanne]

Hi,

I've made it work using this version:

Hi there!

Logarithmic scaling: http://jsfiddle.net/7dbowqfd/5/

However, if I set from and to values, the value displayed is incorrect. https://jsfiddle.net/fdehanne/jn0sf6v2/16/

[xwiz]

This would be a cool feature and will be negligible to the js size. Implementation works better than most I've seen but the on change values need updates. https://codepen.io/flostrasser/pen/NWxJXMY

I think the major thing missing is an API to use or get prettified values instead of actual values.