jQuery 가격 슬라이더 필터 값

Question

jQuery 가격 슬라이더를 만들었지 만 실제 가격 범위에서 필터 영역을 시작하는 방법을 모르겠습니다. 현재 '$ 299 - $ 1099'과 같은 것을 선호 할 때 '$ [object Object] - $ [object Object]'이 있습니다. 슬라이더 선택기를 움직이면 객체 참조가 올바른 가격으로 대체되지만 필터 영역의 시작부터 올바른 범위를 갖기를 원합니다.

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> 

자바 스크립트 : 나는 다음과 같은 코드에서 내 구조를 기반

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