У мене є повзунок зі значеннями від 0 до 100.
Я хочу відобразити їх у діапазоні від 100 до 10 000 000.
Я бачив деякі функції, розкидані по мережі, але всі вони перебувають на C ++. Мені це потрібно в Javascript.
Будь-які ідеї?
У мене є повзунок зі значеннями від 0 до 100.
Я хочу відобразити їх у діапазоні від 100 до 10 000 000.
Я бачив деякі функції, розкидані по мережі, але всі вони перебувають на C ++. Мені це потрібно в Javascript.
Будь-які ідеї?
Відповіді:
Ви можете використовувати таку функцію:
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" />
value
і, position
щоб отримати зворотний ефект.
Для отримання бажаного розподілу, я думаю, ви можете скористатися цією формулою:
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 до 10 000 000, що, на моє математично-іржаве око, є тим розподілом, який ви хочете. 8-)
Не зовсім відповідаючи на запитання, але для зацікавлених людей зворотне відображення останнього рядка
return (Math.log(value)-minv)/scale + min;
просто для документування.
ПРИМІТКА - значення має бути> 0.
Проблема із справжнім логарифмічним повзунком у нижньому кінці, кілька точок на повзуні, ймовірно, призведуть до повторення значень.
З точки зору чисто інтерфейсу користувача, він також не забезпечує дуже інтуїтивно зрозумілий результат для вводу користувачами.
Я думаю, що кращим варіантом є використання "ступінчастого" перетворення з рівномірним розподілом.
Іншими словами, ми вказуємо ряд приростів, які ми хочемо використовувати (наприклад: 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
.
Примітка : Точки повзунка не повинні перевищувати кількість пікселів у повзуні
Нарешті, ми просто трансформуємо наш результат, використовуючи алгоритм, описаний вище. Приклад коду також виконує певну роботу, тому вихідний результат завжди є круглим для поточного інтервалу кроків.
Я шукав логарифмічний повзунок для Angular, але не можу знайти жодного, і тоді я натрапив на цю відповідь,
І я створив це для Angular 2+ (Демо в Angular 6): РОБОЧА ДЕМО
Дякуємо @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;
}
};