Логарифмический слайдер - PullRequest
Новая
       45

Логарифмический слайдер

68 голосов
/ 11 мая 2009

У меня есть слайдер со значениями в диапазоне от 0 до 100.

Я хочу отобразить их в диапазоне от 100 до 10000000.

Я видел некоторые функции, разбросанные по сети, но все они на C ++. Мне это нужно в Javascript.

Есть идеи?

Ответы [ 5 ]

159 голосов
/ 11 мая 2009

Вы можете использовать функцию, подобную этой: 

function logslider(position) {
  // position will be between 0 and 100
  var minp = 0;
  var maxp = 100;

  // The result should be between 100 an 10000000
  var minv = Math.log(100);
  var maxv = Math.log(10000000);

  // calculate adjustment factor
  var scale = (maxv-minv) / (maxp-minp);

  return Math.exp(minv + scale*(position-minp));
}

Полученные значения соответствуют логарифмической шкале: 

js> logslider(0);
100.00000000000004
js> logslider(10);
316.22776601683825
js> logslider(20);
1000.0000000000007
js> logslider(40);
10000.00000000001
js> logslider(60);
100000.0000000002
js> logslider(100);
10000000.000000006

Функция реверса, с теми же определениями для minp, maxp, minv, maxv и scale, вычисляет позицию ползунка из значения, подобного этому: 

function logposition(value) {
   // set minv, ... like above
   // ...
   return (Math.log(value)-minv) / scale + minp;
}


Все вместе, обернутые в класс и в виде фрагмента функционального кода, это будет выглядеть так: 

// Generic class:

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: 20, minval: 100, maxval: 10000000});

$('#slider').on('change', function() {
   var val = logsl.value(+$(this).val());
   $('#value').val(val.toFixed(0));
});

$('#value').on('keyup', function() {
   var pos = logsl.position(+$(this).val());
   $('#slider').val(pos);
});

$('#value').val("1000").trigger("keyup");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Input value or use slider:
<input id="value" />
<input id="slider" type="range" min="0" max="20" />
9 голосов
/ 19 ноября 2011

Не совсем отвечает на вопрос, но для интересующихся, обратное отображение последней строки - 

return (Math.log(value)-minv)/scale + min;

только для документирования.

ПРИМЕЧАНИЕ: значение должно быть> 0.

9 голосов
/ 11 мая 2009

Чтобы получить нужный дистрибутив, я думаю, вы можете использовать эту формулу: 

var value = Math.floor(-900 + 1000*Math.exp(i/10.857255959));

Вот отдельная страница, которая напечатает значения, которые вы получите для ползунка 0-100, пропустив их по этой формуле: 

<html><body><script>
for (var i = 0; i <= 100; i++) {
    var value = Math.floor(-900 + 1000*Math.exp(i/10.857255959));
    document.write(value + "<br>");
}
</script></body></html>

Число, которое, на мой взгляд, выглядит математически ржавым, должно быть от 100 до 10000000. 8 -)

1 голос
/ 03 августа 2018

Я искал Логарифмический ползунок Angular , но не могу найти ни одного, и тогда я наткнулся на этот ответ,

И я создал это для Angular 2+ (демонстрация на Angular 6): WORKING DEMO

Спасибо @ sth , за фрагмент: 

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;
   }
};
0 голосов
/ 12 июня 2019

Проблема с истинным логарифмическим ползунком заключается в том, что на нижнем уровне несколько точек ползунка часто приводят к дублированию значений.

С точки зрения чисто пользовательского интерфейса, он также не обеспечивает очень интуитивно понятного вывода для пользовательского ввода.

Я думаю, что лучшим вариантом является использование «ступенчатого» преобразования с равномерным распределением.

enter image description here

Другими словами, мы указываем серию приращений, которые мы хотим использовать (например: 1, 10, 100, 1000). Затем мы разбиваем ползунок на равные части в зависимости от количества определенных приращений. Когда мы перемещаемся по разным разделам, вывод ползунка будет увеличиваться на соответствующий шаг.

РАБОЧИЙ ДЕМО

РЕАКТИВНЫЙ КОД

В приведенном выше примере мы определяем наш массив min, max & intervals. 

<ExpoStepSlider
  intervals={[1, 2, 5, 10, 100, 1000]}
  min={1}
  max={50000}
/>

Затем мы должны найти количество дискретных значений, которые должен иметь наш ползунок, чтобы он должным образом переходил от минимального к максимальному на основе наших определенных распределений интервалов. 

let sliderPoints = Math.ceil(
  (max - min) / 
  intervals.reduce((total, interval) => total + interval / intervals.length, 0)
);

В этом случае 535.

Примечание : количество точек слайдера не должно превышать количество пикселей в слайдере

Наконец, мы просто преобразуем наш вывод, используя алгоритм, описанный выше. Пример кода также выполняет некоторую работу, поэтому выходные данные всегда округляются для текущего интервала шага.

...