JQuery UI Slider с нелинейными / экспоненциальными / логарифмическими шагами - PullRequest
Новая
       40

JQuery UI Slider с нелинейными / экспоненциальными / логарифмическими шагами

8 голосов
/ 20 сентября 2011

Я новичок в Javascript и JQuery, я пытаюсь использовать JQuery UI Slider для замены выпадающих списков ценового диапазона (один для минимальной цены, другой для максимальной цены) для одного из моих сайтов.

Здесьмой текущий код: 

$(function() {
var slider = $( "#slider-range" ).slider({
    range: true,
    min: 0,
    max: 2500000,
    step: 1000,
    values: [ 0, 2500000 ],
    slide: function( event, ui ) {
            $( "#amount" ).val( "RM " + commafy(ui.values[ 0 ]) + "  to  RM " + commafy(ui.values[ 1 ]) );
    }
});
    $( "#amount" ).val( "RM " + commafy($( "#slider-range" ).slider( "values", 0 )) +
"  to  RM " + commafy($( "#slider-range" ).slider( "values", 1 )) );
    function commafy(val) {
    return String(val).split("").reverse().join("")
                      .replace(/(.{3}\B)/g, "$1,")
                      .split("").reverse().join("");
}
});

Диапазон цен от 0 до 2500000.После тестирования я обнаружил, что UX будет лучше, если ползунок масштабируется нелинейно, поскольку большинство пользователей на моем сайте будут искать в диапазоне от 25 000 до 200 000.

Очень маленькая часть ползунка должна показыватьДиапазон от 0 до 25000, 70% из которых показывают от 25 000 до 200 000, а остальные должны отображать 200 000 и выше.Я не хочу, чтобы он привязывался к фиксированным значениям, но шаги должны быть 1000.

Я нашел два решения на этом сайте:1) Логарифмический ползунок <- Решение не основано на использовании ползунка пользовательского интерфейса JQuery, поэтому я не знаю, как применить его в своем коде.2) <a href="/723316/jquery-slider-kak-sdelat-shag-izmeneniya-razmera"> JQuery Slider, как сделать «шаговое» изменение размера <- Я не могу сделать это из-за того, что парень начал использовать истинные значения и значения как часть решения.Я попытался применить к своему коду, ползунок работает нормально (хотя на мой вкус слишком быстро сдвинулся к концу), но текст не показывался. </p>

Есть идеи?

1 Ответ

2 голосов
/ 12 ноября 2014

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

<div id="slider-range"></div>
<input id="amount" type="text" size="40" />

и JS: 

var slider = $("#slider-range").slider({
    range: true,
    min: 0,
    max: 100,
    step: 1,
    values: [10, 80],
    slide: function (event, ui) {
        $("#amount").val("RM " + commafy(ui.values[0]) + "  to  RM " + commafy(ui.values[1]));
    }
});
$("#amount").val("RM " + commafy($("#slider-range").slider("values", 0)) +
    "  to  RM " + commafy($("#slider-range").slider("values", 1)));

function commafy(val) {
    /* Total range 0 - 2,500,000 */
    /* 70% from 25,000 to 200,000, what have left (2,325,000) share left (25,000) and right (2,300,000) */
    /* So, final dividing */
    var toPresent = 0;
    if (val < 10) {
        toPresent = (val / 10) * 25000;
    } else if (val <= 80) {
        toPresent = 25000 + (val - 10) / 70 * 175000;
    } else {
        toPresent = 200000 + (val - 80) / 20 * 2300000;
    };
    return String(toPresent).split("").reverse().join("")
        .replace(/(.{3}\B)/g, "$1,")
        .split("").reverse().join("");
}

Пример Fiddle .

...