我是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 < - 在傢伙開始使用真值和值作爲解決方案的一部分後,我無法做出正面或反面的反應。我嘗試應用我的代碼,滑塊工作正常(雖然移動到最後我的口味太快),但文字沒有顯示。
任何想法?