Logarithmic increase of values about ion.rangeslider HOT 14 OPEN

Hi there!

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

from ion.rangeslider.

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

from ion.rangeslider.

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.

from ion.rangeslider.

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

from ion.rangeslider.

Hi, it could be done now with prettify function.

from ion.rangeslider.

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)...?

from ion.rangeslider.

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

from ion.rangeslider.

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

from ion.rangeslider.

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)

from ion.rangeslider.

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|...

from ion.rangeslider.

@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/

from ion.rangeslider.

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.

from ion.rangeslider.

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/

from ion.rangeslider.

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.

from ion.rangeslider.