動態更新價格滑塊

Question

我目前價格滑塊http://www.showstyle.lu/homme/比較上http://theme-lookz-responsive.webshopapp.com/en/designer/，正如你可以在過濾器中看到，如果你拖我們的網頁上（展示樣式）最小&最大的數字值過濾不動態更新，即你必須猜測滑塊的放開位置，並希望它落在一個價格上。

在示例網站上：如果您拖動價格過濾器，則最大值最小值會動態更新，以便更容易地查看您的設置。

我試着比較兩個過濾器的價格框的代碼，看到他們實現了這個額外的腳本，但無法弄清楚，如果這是什麼原因導致它，我認爲這只是任何想法如何重新制定到我的模板？兩者都使用相同的CMS，因此使用此代碼是允許的，這只是一個舒適性更新。我設法調整了代碼，但不明白我是否應該用price-filter-range或min/max語法替換「ui」語法。

原創劇本

<script type="text/javascript"> 
$(function(){ 
    $('#filter_form input, #filter_form select').change(function(){ 
    $(this).closest('form').submit(); 
    }); 

    $("#collection-filter-price").slider({ 
    range: true, 
    min: 0, 
    max: 20, 
    values: [0, 20], 
    step: 1, 
    slide: function(event, ui){ 
     $('.sidebar-filter-range .min span').html(ui.values[0]); 
     $('.sidebar-filter-range .max span').html(ui.values[1]); 

     $('#filter_form_min').val(ui.values[0]); 
     $('#filter_form_max').val(ui.values[1]); 
    }, 
    stop: function(event, ui){ 
     $('#filter_form').submit(); 
    } 
    }); 
}); 

的0/20值取決於你的頁面上，所以我想這還需要基於對當前價格最高的項目是動態目錄頁

任何幫助非常感謝，非常感謝！

Answer 1

試試這個：

$("#collection-filter-price").slider({ 
    range: true, 
    min: 0, 
    max: 750, 
    values: [$('#filter_form_min').val(), $('#filter_form_max').val()], 
    step: 1, 
    slide: function(event, ui){ 
    $('.price-filter-range .min span').text(ui.values[0]); 
    $('.price-filter-range .max span').text(ui.values[1]); 
    }, 
    stop: function(event, ui){ 
    $('#filter_form_min').val(ui.values[0]); 
    $('#filter_form_max').val(ui.values[1]); 
    $('#filter_form').submit(); 
    } 
}); 

請注意，這個代碼（在我的答案）從原來的被更新由於誤解。我也重新編輯它以修復因包含此代碼而被破壞的功能。

編輯：我只注意到你的網站已經包括JS代碼

$(function(){ 
    $('#filter_form input, #filter_form select').change(function(){ 
     $(this).closest('form').submit(); 
    }); 

    $("#collection-filter-price").slider({ 
     range: true, 
     min: 0, 
     max: 750, 
     values: [0, 520], 
     step: 1, 
     slide: function(event, ui){ 
    $('.sidebar-filter-range .min span').html(ui.values[0]); 
    $('.sidebar-filter-range .max span').html(ui.values[1]); 

    $('#filter_form_min').val(ui.values[0]); 
    $('#filter_form_max').val(ui.values[1]); 
    }, 
    stop: function(event, ui){ 
    $('#filter_form').submit(); 
    } 
    }); 
    }); 

但是這個代碼正在由服務器動態生成的（注意如何520嵌入腳本）...唯一的原因，它不起作用是因爲它期望類名是0​​而不是price-filter-range。如果你可以做出正確的修改，以便它指向正確的元素，那麼它應該工作。