jQuery слайдер не отображается

Question

У меня есть ползунок jQuery, который я пытаюсь реализовать на моем сайте Wordpress.

HTML

<h2 class="pov-header price-range-trigger">Price Range</h2> 
<div id="price-range-container" style="display:none;"> 
    <div id="slider-range" style="font-size: 90%; margin-top: 5em;"></div> 
    <div id="slider-value-min" style="margin-top: 1.5em;float:left"></div> 
    <div id="slider-value-max" style="margin-top: 1.5em;float:right"></div> 
</div> 

JS

$(function() { 
    $("#slider-range").slider({ 
    range: true, 
    min: 0, 
    max: 500000, 
    step: 10000, 
    values: [ 0, 500000 ], 
    slide: function(event, ui) { 
     $("#slider-range").val("R" + ui.values[ 0 ] + " - R" + ui.values[ 1 ]); 
     $("#slider-value > #slider-value-min").html(ui.values[0]); 
     $("#slider-value > #slider-value-max").html(ui.values[1]); 
     var minRange = $("#slider-value > #slider-value-min").html(); 
     var maxRange = $("#slider-value > #slider-value-max").html(); 

    }, 
    change: function(event, ui) { 
      $("#slider-range").val("R" + ui.values[ 0 ] + " - R" + ui.values[ 1 ]); 
     } 
    }); 

$("#slider-range").val("R" + $("#slider-range").slider("values", 0) + 
    " - R" + $("#slider-range").slider("values", 1)); 
}); 

Моя проблема заключается в том, что это ничего не показывает, в том месте, где она должна быть, я очень новичок в JQuery и имеют занимался учебниками по этому поводу большую часть дня, мне кажется, что я что-то упускаю.

Кто-нибудь знает, где я могу ошибиться?

Answer 1

Вы не видите бегунок, потому что у вас есть display:none в контейнере:

<div id="price-range-container" style="display:none;"> 

изменить его на

<div id="price-range-container"> 

Проверить это jsFiddle: http://jsfiddle.net/xBB5x/9942/