具有非線性/指數/對數步驟的JQuery UI滑塊

我是JavaScript和JQuery的新手，我試圖用JQuery UI滑塊替換價格範圍下拉框（一個用於最低價格，另一個用於最高價格）我的網站之一。具有非線性/指數/對數步驟的JQuery UI滑塊

這裏是我當前的代碼：

$(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到250萬輛。經過測試，我發現如果滑塊非線性縮放，UX會更好，因爲我網站上的大多數用戶都會在25,000到200,000範圍內進行搜索。

滑塊的非常微小的部分應該顯示0到25000的範圍，其中70％顯示25,000到200,000，而其餘顯示200,000或更高。我不希望它捕捉到固定值，但步驟必須是1000

我發現在這個網站兩種解決方法：）
< - 該解決方案是不是基於使用jQuery UI滑塊，所以我真的不知道如何應用到我的代碼。
2）JQuery Slider, how to make "step" size change < - 在傢伙開始使用真值和值作爲解決方案的一部分後，我無法做出正面或反面的反應。我嘗試應用我的代碼，滑塊工作正常（雖然移動到最後我的口味太快），但文字沒有顯示。

任何想法？

來源

2011-09-20 Kok Hsien

你可以採取這種方法：使用滑塊範圍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。

來源

2014-11-12 01:05:54 skobaljic

具有非線性/指數/對數步驟的JQuery UI滑塊

回答

相關問題