Когда слайдере нужно использовать для ввода несоизмеримых по величине данных (например, от 1 тысячи до 10 миллионов рублей), то разумнее использовать какую-то нелинейную шкалу. В частности, для ввода сумм подходящей шкалой будет логарифмическая (по основанию 10).
Для сравнения приведу два слайдера с линейной и нелинейной шкалой.
Нелинейная система координат
Чтобы обычный слайдер превратить такой нелинейный нужно определить две функции, которые будут переводить числа из одной системы отсчета в другую.
function fromSlider(value) {
return Math.round(Math.pow(10, value));
}
function toSlider(value) {
return Math.log(value) / Math.log(10);
}
Теперь там где нужно установить значение в слайдер используем toSlider
, а там где получаем значение из слайдера — fromSlider
.
$(".logarithmic__slider").slider({
min: toSlider(1000),
max: toSlider(10000000),
step: 0.01,
value: toSlider(initialValue),
slide: function (e, ui) {
$(".logarithmic__value").html(fromSlider(ui.value));
}
});
Округление и форматирование
Чтобы данные выглядели презентабельно их хорошо бы ещё округлить и отформатировать.
function round(n, threshold) {
var digits, out;
n = n.toFixed(0);
digits = n.length;
out = n.substr(0, Math.min(digits, threshold));
if (digits > threshold) {
out = out + "000000000000".substr(0, digits - threshold);
}
return parseInt(out);
}
Функция оставляет только указанное количество значимых разрядов в числе. Остальные будут обнулены.
function splitGroups(n, delim) {
var digits;
delim = delim || '<span class="tsp"> </span>';
n = n.toFixed(0);
digits = n.length > 3 ? n.length % 3 : 0;
return (digits ? n.substr(0, digits) + delim : '') +
n.substr(digits).replace(/(\d{3})(?=\d)/g, "$1" + delim);
}
А эта функция разделяет группы разрядов числа. В качестве разделителя по умолчанию я использую пробел половинной ширины.
.tsp {
font-size: 50%;
line-height: 1;
}
Или можно указать требуемый разделитель вторым параметром функции.
Коментарии к заметке
Сначала код прочитал, а потом автора :) Мир тесен, спасибо ;)