Нелинейная шкала слайдера

Когда слайдере нужно использовать для ввода несоизмеримых по величине данных (например, от 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;
}

Или можно указать требуемый разделитель вторым параметром функции.