IonDen / ion.rangeSlider

jQuery only range slider
http://ionden.com/a/plugins/ion.rangeSlider/en.html
MIT License
2.56k stars 508 forks source link

Is it possible to set range intervals with min\max? #641

Closed sinneren closed 4 years ago

sinneren commented 5 years ago

I mean ranges like in noUiSlider to make non linear slider. I need to do logarythmic (or like it) slider with values from 100.000 to 100.000.000 and in 50% it must be 5.000.000.

IonDen commented 5 years ago

Hi, yes. Start from this demo: https://jsfiddle.net/IonDen/5f2730ds/

sinneren commented 5 years ago
prettify: function(num) {
            var current = num;
            var middle = Math.floor(this.max / 2 / this.step) * this.step;

                if (num > middle) {
            var minv = Math.log(this.min);
          var maxv = Math.log(this.max);

            var scale = (maxv - minv) / 100;
          var pos = (Math.log(num) - this.min) / scale;

          current = Math.exp(pos * scale + this.min);
          current = Math.floor(current / this.step) * this.step + this.step;

            if (current > this.max) {
            return this.max;
          } else {
            return current;
          }
        } else {
            return current;
        }
    }
IonDen commented 5 years ago

@sinneren, create a separate transform function. Because you will also need this to transform actual value. prettify is doing only visual change. Or, you can write prettified value in to external input.

Demo: https://jsfiddle.net/IonDen/kc0tzreu/

Rombecchi commented 4 years ago

Hi, although I understand how the mechanism works, I don't think it's as intuitive as the one on noUiSlider. I think the best solution is to create a range option just like the one on noUiSlider.

EXAMPLE: From 0 to 10.000 (at 10%) step the value by 100, then until 500.000 (at 60%) step by 10.000. From 500.000 to 1.000.000 (80%) step by 100.000. Then from there step by 1.000.000 range: { 'min': [0, 100], '10%': [10000, 10000], '60%': [500000, 100000], '80%': [1000000, 1000000], 'max': [100000000] }