兩個jquery slide ranger

來自我的第一個問題！我尋找可能的方法來做到這一點的功能，我想也沒有找到任何東西，幫我..兩個jquery slide ranger

I'm新的JavaScript和這個工作作爲基礎： http://jsfiddle.net/danieltulp/gz5gN/42/ 當我調整價格 - 滑塊，我想選擇我正在尋找的數字的價格。

ex。搜索123 $ - 900 $

和質量一樣。

我也試圖讓每個滑塊有不同的最小最大值和值，這是可能的嗎？

$(function() { 
var options = { 
    range: true, 
    min: 0, 
    max: 250, 
    step: 1, 
    values: [0, 250], 
    change: function(event, ui) { 
     var minP = $("#price").slider("values", 0); 
     var maxP = $("#price").slider("values", 1); 
     var minQ = $("#quality").slider("values", 0); 
     var maxQ = $("#quality").slider("values", 1); 
     showProducts(minP, maxP, minQ, maxQ); 
    } 
};

來源

2013-12-10 El varga

jsfiddle示例只是重用相同的功能。你可以使用兩個函數。所有的問題都可以通過查看jsfiddle來回答。你缺乏的是理解HTML，Javascript和DOM如何工作。你必須自己學習。 –

http://jqueryui.com/slider/#multiple-vertical – rynhe

需要2個功能。一個用於每個滑塊的onChange事件。在每個onChange函數執行後min和max之後，應根據計算結果更新每個滑條的值。 showProducts()將以其當前形式工作。

這個UX感覺太複雜了。你有沒有考慮過以其他方式代表你的數據過濾？

來源

2013-12-10 14:17:03

這就是我解決它的方法！

小提琴在這裏找到：http://jsfiddle.net/5PAa7/28/ 我把它放在兩個變量，而不是兩個函數。

function showProductsP(minP, maxP) { 
$(".product-box").filter(function() { 
    var price = parseInt($(this).data("price"), 10); 
    if(price >= minP && price <= maxP){ 
     $(this).show(); 
    } else { 
     $(this).hide(); 
    } 
}); 
$(function() { 
var options = { 
    range: true, 
    min: 0, 
    max: 900, 
    step: 5, 
    values: [0, 900], 
    slide: function(event, ui) { 
     var minP = $("#slider-price").slider("values", 0); 
     var maxP = $("#slider-price").slider("values", 1); 
     var minL = $("#slider-length").slider("values", 0); 
     var maxL = $("#slider-length").slider("values", 1); 
     $(this).parent().find(".amount").html(ui.values[ 0 ] + " - " + ui.values[ 1 ]); 
     showProducts(minP, maxP, minL, maxL); 
    } 
}; 
    var options_length = { 
    range: true, 
    min: 0, 
    max: 60, 
    step: 1, 
    values: [0, 60], 
    slide: function(event, ui) { 
     var minP = $("#slider-price").slider("values", 0); 
     var maxP = $("#slider-price").slider("values", 1); 
     var minL = $("#slider-length").slider("values", 0); 
     var maxL = $("#slider-length").slider("values", 1); 
     $(this).parent().find(".amount").html(ui.values[ 0 ] + " - " + ui.values[ 1 ]); 
     showProducts(minP, maxP, minL, maxL); 
    } 
};

來源

2013-12-13 13:10:23

兩個jquery slide ranger

回答

相關問題