动态更新价格滑块

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。如果你可以做出正确的修改，以便它指向正确的元素，那么它应该工作。