значения фильтра слайдера jQuery

Question

Я создал слайдер цены jQuery, но я не уверен, как создать область фильтра с фактическими ценовыми диапазонами? В настоящее время у него есть «$ [object Object] - $ [object Object] ', когда я предпочитаю иметь что-то вроде' $ 299 - $ 1099 '. После того, как вы начнете перемещать селектор слайдера, ссылки на объекты заменяются на правильные цены, но я хочу, чтобы область фильтра имела правильные диапазоны от начала.

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/

Любая помощь очень ценится. Спасибо в продвинутом режиме.

Answer 1

Опция Создать бы правильное место, чтобы установить начальное значение

$(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

Answer 2

добавить это в нижней части JS

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