Два jquery slide рейнджер

Question

Первый вопрос от меня! У меня есть поиск возможных способов сделать эту функцию, что я хочу, но не смог найти ничего, что помогло мне ..

I'm нового в яваскрипте и работать с этим в качестве базы: http://jsfiddle.net/danieltulp/gz5gN/42/ Когда я настроить цена- слайдер, я хочу узнать, какую цену в цифрах я ищу.

ex. поиск от 123 $ - 900 $

И то же самое с качеством.

Я также пытаюсь сделать каждый слайдер разным min-max и значениями, возможно ли это?

$(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); 
    } 
}; 

Answer 1

Требуются 2 функции. Один для каждого события слайдера onChange. После каждого исполнения onChange выполнение значений min и max для каждого слайдера должно быть обновлено на основе результатов расчета. showProducts() будет работать в текущей форме.

Этот UX кажется слишком сложным. Рассматривали ли вы какое-то другое представление о фильтрации данных?

Answer 2

Вот как я решил это!

сценарий найден здесь: 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); 
    } 
};