2013-12-09 88 views
4

我创建了一个jQuery价格滑块,但我不确定如何让过滤器区域以实际价格范围开始?目前它有'$ [对象对象] - $ [对象对象]',当我更喜欢它有'$ 299 - $ 1099''。 一旦开始移动滑块选择器,对象引用将被替换为正确的价格,但我希望过滤器区域从一开始就具有正确的范围。jQuery价格滑块筛选器值

HTML:

<div id="slider-container"></div> 
<p> 
<label for="amount">Price range:</label> 
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" /> 
</p> 
<div id="computers"> 
<div class="system" data-price="299">div1 - 299</div> 
<div class="system" data-price="599">div2 - 599</div> 
<div class="system" data-price="1099">div3 - 1099</div> 
</div> 
<div id="slider-range"></div> 

的JavaScript:

$(function() { 
    $('#slider-container').slider({ 
     range: true, 
     min: 299, 
     max: 1099, 
     values: [299, 1099], 
     slide: function(event, ui) { 
      $("#amount").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]); 
      var mi = ui.values[ 0 ]; 
      var mx = ui.values[ 1 ]; 
      filterSystem(mi, mx); 
     } 
    }); 
    $("#amount").val("$" + $("#slider-range").slider("values", 0) + 
    " - $" + $("#slider-range").slider("values", 1)); 
}); 

function filterSystem(minPrice, maxPrice) { 
$("#computers div.system").hide().filter(function() { 
    var price = parseInt($(this).data("price"), 10); 
    return price >= minPrice && price <= maxPrice; 
}).show(); 
} 

基于我从下面的代码我的结构: http://jsfiddle.net/bZmJ8/32/

任何帮助是极大的赞赏。 谢谢先进。

回答

2

底部的创建选项是设置一个初始值

$(function() { 
     $('#slider-container').slider({ 
      range: true, 
      min: 299, 
      max: 1099, 
      values: [299, 1099], 
      create: function() { 
       $("#amount").val("$299 - $1099"); 
      }, 
      slide: function (event, ui) { 
       $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]); 
       var mi = ui.values[0]; 
       var mx = ui.values[1]; 
       filterSystem(mi, mx); 
      } 
     }) 
}); 

FIDDLE

+0

很好,另一个很好的答案,谢谢你,你也减少了JS的大小,欢呼声。 –

1

添加到您的JS

$(document).ready(function() { 
    $('#amount').val('\$299 - \$1099'); 
}); 
+0

啊邪恶适当的位置,由于它的工作一对待。 也感谢您的超级提示响应! –